Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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.

Vertical-phones1

 

 

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.

 

Vertical-phones2

 

 


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


The following two tabs change content below.
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.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest