Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Problem with form in mobile view


  #1  
Old Sep 22, 2017, 03:00 PM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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.

  #2  
Old Sep 23, 2017, 03:52 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Sep 28, 2017, 12:07 PM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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.

  #4  
Old Sep 28, 2017, 12:53 PM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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.
  #5  
Old Sep 30, 2017, 01:33 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Sep 30, 2017 at 01:39 PM.
  #6  
Old Oct 1, 2017, 11:04 AM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
Quote:
Originally Posted by juggledad
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.
  #7  
Old Oct 2, 2017, 04:52 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Oct 2, 2017 at 05:01 AM.
  #8  
Old Oct 3, 2017, 05:17 PM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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?
  #9  
Old Oct 3, 2017, 05:41 PM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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.
  #10  
Old Oct 3, 2017, 06:03 PM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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?
  #11  
Old Oct 4, 2017, 05:20 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
The reason the background repeat only happens when the screen gets smaller is because of where you put the CSS
HTML Code:
div.post table {
background-repeat: no-repeat;
}
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:
HTML Code:
<style type="text/css">body{text-align:center;margin:0...
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:
HTML Code:
@media only screen and (max-width:767px) {
	#text-3 .textwidget {
		font-size:.5em;
		font-family:"Times New Roman",Times,serif;
	}

	h1 {
		font-size:24px;
		line-height:1.2;
		margin:0.3em 0 10px;
	}
}

@media only screen and (max-width:767px) {
	#text-13 .textwidget {
		font-size:.001em;
		font-family:"Times New Roman",Times,serif;
	}

	div.post table {
		background-repeat:no-repeat
	}

 </style>
so you see that the first line is
HTML Code:
@media only screen and (max-width:767px) {
so everything in that block applies to it - everything from the '{' to it's closing '}'

Then you have a second @media block which is:
HTML Code:
@media only screen and (max-width:767px) {
	#text-13 .textwidget {
		font-size:.001em;
		font-family:"Times New Roman",Times,serif;
	}

	div.post table {
		background-repeat:no-repeat
	}

 </style>
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
HTML Code:
@media only screen and (max-width:767px) {
	#text-3 .textwidget {
		font-size:.5em;
		font-family:"Times New Roman",Times,serif;
	}
	h1 {
		font-size:24px;
		line-height:1.2;
		margin:0.3em 0 10px;
	}
	#text-13 .textwidget {
		font-size:.001em;
		font-family:"Times New Roman",Times,serif;
	}
}

div.post table {
	background-repeat:no-repeat
}

</style>
Ok that's it for today's debugging CSS lesson (grin)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Oct 4, 2017, 11:22 AM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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/
  #13  
Old Oct 4, 2017, 11:59 AM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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/
  #14  
Old Oct 4, 2017, 12:01 PM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
Sorry that was posted in haste, JD.

Now I see that there is no captcha image code.

Still working....
  #15  
Old Oct 4, 2017, 05:23 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Oct 5, 2017, 11:01 AM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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?
  #17  
Old Oct 5, 2017, 11:07 AM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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?

Last edited by VivBounty; Oct 5, 2017 at 11:16 AM. Reason: Missed a major point.
  #18  
Old Oct 5, 2017, 12:25 PM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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!
  #19  
Old Oct 5, 2017, 02:28 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Oct 7, 2017 at 04:10 PM.
  #20  
Old Oct 7, 2017, 11:01 AM
VivBounty
 
51 posts · Jun 2012
Canadian Maritimes
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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Mobile dropdown nav menu appearing in non-mobile view header Michael4fm Montezuma Theme 4 Aug 19, 2014 09:56 PM
[SOLVED] wp e-commerce category view problem tropicalconsulting eCommerce & Atahualpa 8 Jul 30, 2012 04:49 AM
Mobile Sidebar problem Context Canada Center area post/pages 1 Mar 1, 2012 02:46 PM
Mobile view plugin joestyer Plugins & Atahualpa 2 Feb 16, 2009 07:16 AM


All times are GMT -6. The time now is 01:33 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.