I recently upgraded to WP 3.9+ and Salient 4.0.3. as a result of noticing a huge whitespace after all Contact Form 7 forms on the site. I've checked the code in the forms and it is fine. I've even tried a new form but get the same large block of whitespace at the end of the form. This gap appears on all platforms and browsers I've tested so far. This did not occur on previous versions of WP and Salient.
BTW I cannot thank you enough for this theme. It works like a dream, is responsive and my clients love it.
Hello Tahir. 'Fraid this was one of the first things I tried to fix this issue but it does not correct the increased height of the form. I am thinking this has something to do with the Ajax image loader. If I remove the loader, the form corrects its height. This has only happened since the WP 3.9 upgrade and before I upgraded Salient. So it must be attributed to 3.9.
I've attached my Firebug screen shot. I've tried other CSS changes but the only one which appears to be the offender is the Ajax loader image on Submit Button.
We have had a request from several Seattle organizations requesting our sites are more Accessible to the visually impaired. On this site, the Captcha code cannot be read on a mobile phone - it is way too small to read. I tried CSS code to enlarge the box and came up with a code that would make all images on the form 110% larger. I did not know that this would affect the ajax image loader which was the culprit that caused the huge white space. The CF7 developer, Takayuki Miyoshi responded that I remove it and of course, the white space has gone. However, he has not responded with a fix that would allow users to use a much larger Captcha image as it is limited to just the 3 sizes, s, m, and l (large) which is not large enough for mobiles.
I have tried one other solution and it works although the ajax loader is now ridiculously large but the white space is not such a problem using:
.row .col .wpcf7 img { width: 120px; }
The above fix is currently commented out while I hope you can come up with a better solution. "Accessibility" sites are becoming a requirement and can affect our SEO rankings if there are issues, so any way you could help would be brilliant.
I recently upgraded to WP 3.9+ and Salient 4.0.3. as a result of noticing a huge whitespace after all Contact Form 7 forms on the site. I've checked the code in the forms and it is fine. I've even tried a new form but get the same large block of whitespace at the end of the form. This gap appears on all platforms and browsers I've tested so far. This did not occur on previous versions of WP and Salient.
BTW I cannot thank you enough for this theme. It works like a dream, is responsive and my clients love it.
Hey Steph!
Add this into the Custom CSS box located in your Salient Options panel :
.wpcf7-form p { padding-bottom: 0px !important; }
Thanks
ThemeNectar Support Team
Hello Tahir. 'Fraid this was one of the first things I tried to fix this issue but it does not correct the increased height of the form. I am thinking this has something to do with the Ajax image loader. If I remove the loader, the form corrects its height. This has only happened since the WP 3.9 upgrade and before I upgraded Salient. So it must be attributed to 3.9.
I've attached my Firebug screen shot. I've tried other CSS changes but the only one which appears to be the offender is the Ajax loader image on Submit Button.
Thanks, Steph
Hey Steph! Is this still an occurring issue? I've checked your URL on a few browsers but can't see the space anymore.
Let me know :)
Cheers
We have had a request from several Seattle organizations requesting our sites are more Accessible to the visually impaired. On this site, the Captcha code cannot be read on a mobile phone - it is way too small to read. I tried CSS code to enlarge the box and came up with a code that would make all images on the form 110% larger. I did not know that this would affect the ajax image loader which was the culprit that caused the huge white space. The CF7 developer, Takayuki Miyoshi responded that I remove it and of course, the white space has gone. However, he has not responded with a fix that would allow users to use a much larger Captcha image as it is limited to just the 3 sizes, s, m, and l (large) which is not large enough for mobiles.
I have tried one other solution and it works although the ajax loader is now ridiculously large but the white space is not such a problem using:
.row .col .wpcf7 img {
width: 120px; }
The above fix is currently commented out while I hope you can come up with a better solution. "Accessibility" sites are becoming a requirement and can affect our SEO rankings if there are issues, so any way you could help would be brilliant.
Best for now, Steph
Hey Steph!
We the below css selector only the captcha image will be affected so you can change it as per your liking:
body img.wpcf7-captchac { width: 120px !important; }
Cheers
ThemeNectar Support Team
YES, YES and YES it worked beautifully. I didn't use the body tag which is where I went wrong.
THANK YOU SO MUCH.
Steph