The Divi Theme comes with an option to set adjust the "content" width of your site. This lets you choose how wide your want your site's content to be (the default is 1080px). However, there is no equivalent option for setting the content width on mobile devices – on mobiles your site is fixed at 80% width. If you want to change that, here's how:
The following CSS will override Divi's default 80% content width on mobiles:
@media only screen and (max-width: 980px) {
#top-header > .container,
#main-header > .container,
#et_search_outer > .container,
body.single #main-content > .container,
body.page:not(.et-tb-has-template) div.et_pb_row,
body.page.et-tb-has-template .et-l--post div.et_pb_row,
body.single-project div.et_pb_row,
body.single-project div.et_pb_row.et_pb_row_fullwidth {
width: 90% !important;
}
}
Related Post: Adding CSS to the Divi Theme
In this case, I've set the width to 90%, which gives a wider site on mobiles, with less margin on either side. You can of course change this to suit your needs.
This feature is available as an option in Divi Booster 2.4.6 onwards. You'll find it on the Divi Booster settings page, under "Site-wide Settings > Layout > Set mobile content width".
Want get more out of Divi?
Hundreds of new features for Divi
in one easy-to-use plugin
Thank you. Your CSS code works great. I don't know why 80% was picked as the default because every millimeter of space on a phone is valuable real estate (I prefer 94%). Besides, it's easier for people to change the margin or padding if the content is too close to the edge.
Hey Jared, I'm glad that helped! I'm not sure why 80% was chosen either. I think it might be that when the Divi Builder and its defaults were introduced, designs with large amounts of whitespace were popular. Ever since, I've been helping people remove excess whitespace ;)
Thanks very much for this!
Hi!
This code snippet works great on my normal pages. However, it does not seem to work for WordPress Projects, which I am using the theme builder for. Am I doing something wrong?
Hi Linda, I've updated the code to work with projects too. I hope it helps!
This doesn't seem to work anymore.
90% should be the default for mobile anyways.
I was so excited to see this was an option in Divi Booster which I include on every project.
However,
I went into Divi Booster and made the change, saved it.
And now when I go to every page and switch to the mobile view, it still says 80%. (though in a greyed out font)
Is it actually 90%?
I'm thinking it is since the mobile width does not affect anything anymore.
Hi Rick, I took a look at the URL linked in your comment. I can see Divi Booster is running and it's CSS file is being loaded correctly. However, while I can see the file contains the CSS for other features, it is missing the CSS for the mobile width setting. Can I ask you first to go back into the Divi Booster settings, check that the width setting is specified AND that the checkbox next to the setting is ticked (to enable the setting)? Then save the settings and clear your website / browser caches. Hopefully that will get the CSS applying correctly. When I manually add the CSS it adjusts the width as I'd expect. Let me know if you're still having trouble with it after that. Thanks!
Hi Dan,
This seems to only work for pages, but doesn't work for posts? My posts are stuck at 80% no matter what I do! :( Please advise?
Thanks!
Hey Tom, it looks like the code was incorrectly applying twice on posts – giving a 90% x 90% = 81% width… I've updated the code to address this. The updated code will also be in the next version of Divi Booster (2.9.9). Hopefully that helps, but let me know if not. Thanks!
Hey Dan,
Fantastic! I'm happy to hear that and eagerly awaiting the next update!
Thanks a lot Dan!
You're very welcome, Tom!