Keith contacted me when he discovered that his site about Divi (created using the Divi Theme, of course) was failing Google's mobile-friendly test. Google is planning on penalizing the rankings of sites which are not responsive, so getting this sorted out was obviously a priority.
One thing Google was complaining about was that content was being displayed outside the viewing area. Taking a look, I noticed that Keith's comment button initially displayed the text "Please wait 30 seconds before commenting" (as an anti-spam measure added by the WordPress Simple Security Firewall plugin). However, Divi wasn't properly handling the increased text length and it was spilling off the side of the page. Here's how it looked:
To fix this I came up with the following CSS, which ensures the button doesn't exceed the content width and that if the text is long, it wraps onto a new line:
@media only screen and (max-width: 479px){
.form-submit input { max-width: 280px; white-space: normal; }
}
@media only screen and (min-width: 480px) and (max-width: 768px){
.form-submit input { max-width: 400px; white-space: normal; }
}
I've added this fix into the latest update to the Divi Booster plugin, under "Plugins > WordPress Simple Security Firewall", which I'll be releasing in the next day or so.
Here's the result:
Now the button should remain responsive at all times, and pass Google's Mobile-Friendly Test.
Hi Dan
Can't thank you enough for this.
The "WordPress Simple Firewall" is a great plugin but the lack of responsiveness on the Submit button was driving me crazy!!!
Also thanks for you advice regarding the "robots.txt file" which I shall look at shortly.
No problem, Keith! It's great to see you are now mobile-friendly :)