Fix Divi Comment Button Responsiveness when using WordPress Simple Security Firewall

This post may contain referral links which may earn a commission for this site

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:

mobile-button-responsive-before

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:

mobile-button-responsive-after

Now the button should remain responsive at all times, and pass Google's Mobile-Friendly Test.

Hundreds of new features for Divi
in one easy-to-use plugin

2 Comments

  1. 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.

    Reply
    • No problem, Keith! It's great to see you are now mobile-friendly 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *