Problem with form in mobile view
 

Hello ATA/WP sanity savers.

I have applied the 'Mobile-Friendly Test' code to all of my sites, even this one I created for a friend.
https://www.thosbartlettantiquesandoddments.com and most work.

The exception is this optin form for her autoresponder in a "widgets on pages" plugin which does not translate to the mobile view on her "Subscribe" page here:
https://www.thosbartlettantiquesando...com/subscribe/

Is there some code I can add to html/css inserts to fix this?

Much appreciation in advance for any assistance. It took me a week to figure out the table tweaks to get that background image to show.

:confused:

Hi, I took a look at that page...I'm going to go out on a limb and guess that you built this page using the visual editor and have made changes to it since you originally created the page and you are using some widget plugin to add things into the page.

OMG is the HTML a mess. This page has 4 nested tables, HTML elements that span other elements and you have defined a fixed height/width for the main table and used the image of the horse as the background image on the main table.

I would try to cleanup the page. I would get rid of the use of the plugin and manually code the form. I would have two div's - one for the form and a second for the image of the horse and set them side by side.

Then I would add CSS to hide the image of the horse when the viewport was below a certian width.

Hi Juggledad,

No actually, my autoresponder had forms prebuilt. They went to new rule that we had to use captcha on all our sites. So I grabbed one of their forms as they suggested then found that the image didn't show because I had background colour in my tables in my ATA theme. I did not figure that out until I went to the widgets on pages plugin. So now I have the mess you are now looking at.

I am now going to attempt to manually code this page and see if I can produce what you are describing.

Thanks so much for your kind response. I will report back as soon as I can.

:(

Hi again, JD.

Is there a thread or tutorial on how to create a form. Been through the ATO and saw options for form and table styles and as I am not that html savvy, I have always used forms from the autoresponder and just replaced images to ones I preferred.

So going back to my test site where I have been trying to make this subscribe page for months, today I removed the widgets on pages widget and used one of the forms created by the autoresponder right into a page and this is what it looks like: https://vivbounty.info/thosbartletts...sting-ar-form/

1. I can add the last name field. I can even forget about the horse on the actual site, but how do I stop the repetition of that background image?

2. Are there still too many nested tables now?

Thanks for your kind assistance. :o

what autoresponder are you using?
can you send me a PM with an admin ID/PW so I can take a look?

to prevent the background image from repeating use
div.post table {
background-repeat: no-repeat;
}

Hi JD,
Sent you PM. Also tried the above code and image still repeats.

Thanks for all your help. I look forward to your findings. :o

Actually the code does work - shrink your screen and you will see it suddenly apply.

Now your homework is to answer the question - why is that CSS applying only when you make the screen smaller? (hint: where did you add the CSS?)

I went to the site you sent me and see the forms they build. None of the forms are responsive. You might want to inquire where they have their responsive forms - if they have any - and when they will have some if they don't have any.

From their answer you may want to do some research on responsive forms...

Hi JD,

The form is shrinking but the image is still repeating.

That no repeat code was what is not working. I did shrink my screen and saw that the form and image are shrinking.

Any ideas?

Oops nevermind the repeating image.

Now going to figure out where I added the code and how to make it work for this table/form.

So found this code in the HTML Inserts: Body Tag

onresize="OnResizeDocument()"

Then found longer code in the HTML Inserts: Body Bottom

I'm thinking the table is part of the Body and not Body Bottom, but how to make the shrink happen on a mobile?

So confusing.

Does this mean I need to get a form that is responsive on a mobile from the site as you suggested? Will this never work as long as I am using their forms?

The reason the background repeat only happens when the screen gets smaller is because of where you put the CSS
Lets take a look at how I know what is happening.
1) I went to the page in question and used the browsers developers tools to view the page source.
2) I copied the source to a text file.
3) I looked thru the source for teh Atahualpa CSS (it starte with:
and there is a lot of CSS)
4) I copied all the Atahualpa CSS to another file (to make it easier to look at)
5) I did a global replace of '}' with '}\r' - the '}' is the end of a CSS statement and the '\r' in my editor is a new line which makes everything easier to read.
6) I went to the end of the CSS because that is where the 'CSS Insert' option's CSS goes. I then prettied up the CSS to make it even easier to read and here is the very end of the CSS:
so you see that the first line is
so everything in that block applies to it - everything from the '{' to it's closing '}'

Then you have a second @media block which is:
and here I'm showing th </script> which is the end of the Atahualpa CSS. Now note two things
1) there is no closing '}' for the @media block
2) the 'div.post table' block is there. because there is no closing '}' for the media back, everything till the end of the CSS is assumed to be part of that block which means the 'background-repeat:no-repeat' only gets applied when the screen width is less than 768px.

also you have a couple media blocks that could/should be combined. These last two could be written like this
Ok that's it for today's debugging CSS lesson (grin)

Hi JD.

So now in learning all this and doing away with WIDGETSONPAGES widget I have pasted code into the page directly and not into a widget.

Now the whole post has shrunk on full size laptop screen.

See here:

https://vivbounty.info/thosbartletts...subscribe-old/

It would appear that the new code the responder admin gave me for my form is responsive. It does however cut my image off, but I can live with that.

It's better than how it was previously on mobile view.

https://vivbounty.info/thosbartletts...ode-wbg-image/

Sorry that was posted in haste, JD.

Now I see that there is no captcha image code.

Still working....

you shouldn't have the image as inline css for the table AND in the CSS for div.post table. It will cause weird things to show up when the page size gets small.

Thank you JD. Still working. Haven't heard back from the responsive forms but I think perhaps I don't need them?

Do you think I'm getting there, JD?

I am also still having the repeating background picture and on my PC not when the screen is smaller. In fact on the mobile the image is not shrinking at all. Is this to do with the responsive form issue?

So went back and looked at your css debugging lesson and have fixed the background image no-repeat. Programmer still trying to make responsive form soon we'll have this working. yay!

As of now the form is still a table and tables are hard to make responsive unless you use scripts to change them dynamically. The form designer should be using DIV's instead of tables.

OK JD. Got that now. They are still working on it.

Thank you.

Have a great weekend.

It's Thanksgiving weekend here in Canada and I am surely grateful for you. :)