Center Align Divi Fullwidth Header Buttons on Mobile | A Girl and Her Mac

Center Align Divi Fullwidth Header Buttons on Mobile

Aug 19, 2017 | CSS Tip | 13 comments

This is from my #diviquicktip CSS snippet series in which I post different quick CSS fixes on my Facebook page whenever I come across some of the most common pesky Divi quirks. I'll be pulling them from my fb page and adding them here on my blog monthly 😊




When using the fullwidth header module the second button has a left margin of 15px set so that there’s a space between it and the first button. Unfortunately the space is still there on mobile and it shouldn’t be, but we can fix this with a short snippet of CSS code.


The code below goes in your child stylesheet or in Divi theme options > general > Custom CSS box.

You’ll probably need to clear your cache to see it take effect.

Photo used with permission.

{;} css code
@media only screen and (max-width: 480px) {
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_two {
margin-left: 0;

Thanks for stopping by! 😃👋

More Divi Resources

Get updated on new Divi layouts and tutorials!

Like my freebies? Any tips you’d like to leave are greatly appreciated 😍

Coffee & Snack

Donate $5

Doggie Treats

Donate $10

Dinner & Dessert

Donate $25

— you may change the amount to anything you’d like —

Pin It on Pinterest