Last Updated on July 3, 2019

Center Align Divi Fullwidth Header Buttons on Mobile

Aug 19, 2017 | CSS Tutorial | 31 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.




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;