Fixing the Divi Reply Button on Mobile Devices

On almost every website I have built on Divi, the default Divi Reply button in the comments area of the post pages always seems to be off in Mobile devices. Like this image below.

So here is how you can fix the Divi reply button on mobile devices using just a little CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not go to Divi>Theme Options. This will open up the ePanel. Now scroll down until you get to the Custom CSS box on the bottom of this page.

Add this CSS.

/*------------------------------------------------*/
/*---------[COMMENTS REPLY BUTTON FIX]------------*/
/*-------------[ BY GENO QUIROZ ]-----------------*/
/*------------------------------------------------*/

@media only screen and ( max-width: 767px ) {
	.comment {padding-bottom: 60px;}
	.comment_area .comment-reply-link {
    		top: auto;
    		bottom: -45px;
    		padding: 0px 10px;
    		font-size: 18px;}}

What did we just do?

We added 2 Rule Set’s in a media query set to initiate on devices with a screen width smaller that 767px.

The first rule set added a little space (padding) in between each comment.

The second rule set targeted the button itself. The Declaration block is telling the browser to bring the button down a bit, remove some of the button padding to make it a little smaller and to decrease the font size just a tad. And now you have should have something like this.

Well that’s all for now. I hope you find this article useful.

Bio
Latest Posts

Geno Quiroz

Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

Latest posts by Geno Quiroz (see all)

Using Canva.com For Your Blog Featured Images - May 16, 2021
Setting Up Google reCAPTCHA On Your Caldera Form Using The Caldera Forms Anti Spam Plugin - April 25, 2021
Elegant Themes Founder Nick Roach: We Want To Flip the Script and Make Divi the Fastest Page Builder Around - April 9, 2021

3 Comments

Meisha on September 13, 2015 at 5:50 am

Thanks this worked awesome.

Kalle on October 16, 2015 at 6:26 am

Thanks. No more messed up reply buttons on http://popeller.io/index.php/2015/10/09/bitcoin-block-propagation-with-iblt-infographic/

Nu on September 19, 2016 at 1:41 pm

¡Gran consejo y ejemplo! ¡Gracias!

Sería genial contar con una actualización que funionará en Divi 3

😀

Meisha on September 13, 2015 at 5:50 am

Thanks this worked awesome.
Kalle on October 16, 2015 at 6:26 am

Thanks. No more messed up reply buttons on http://popeller.io/index.php/2015/10/09/bitcoin-block-propagation-with-iblt-infographic/
Nu on September 19, 2016 at 1:41 pm

¡Gran consejo y ejemplo! ¡Gracias!

Sería genial contar con una actualización que funionará en Divi 3

😀