Make Your Entire Divi Site Wider on Mobile

Oct 3, 2017 | CSS Tutorial | 10 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

default 80% width

Problem:

Have you ever wanted your whole site to be a bit wider on mobile? Sometimes it looks better with less space on the sides, or maybe you just want to be able to utilize all the space you can.

Fix:

With a snippet of CSS we can change the width of every row on the site on mobile (and tablet) only. I’ve used this with fullwidth and regular-width rows without issue as I think Divi’s rows are all set to the same width regardless of module settings, but if you have problems please comment and I can help!

The CSS code goes in your Divi custom CSS box or child stylesheet, adjust the % to your liking:

{;} css code

/*** MAKE SITE WIDER ON SMALLER SCREENS ***/
@media only screen and (max-width: 980px) {
.et_pb_row {
width: 90%; /*** you might need !important ***/
}
}

90% width

100% width