Center Align Divi Fullwidth Header Buttons on Mobile

Aug 19, 2017 | CSS Tip | 14 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.

Example:

Example

Problem:

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.

Fix:

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;
}
}