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,
.et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row {
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".
Hey Dan, i have a white line at the right side of the page. How do i get rid of that?
Hey Joost, did you manage to fix this? I took a look at the page linked in your comment, but I don't see a white line at the right side of the page. Or am I missing something? Thanks!
Hi Dan – This is amazing! One problem. I am finding that the fullwidth headers we have get cut down to 90% too if I change the width with the CSS code. Is there any way to deal with that? I'm talking about the navy blue header, i.e. on this page: https://www.helpingchildrentoread.com/info/about-us/
I'm crossing my fingers because this has been a headache for ages!
Hi Sarah, you should be able to do it with this CSS:
@media only screen and (max-width: 980px) {
#top-header > .container,
#main-header > .container,
#et_search_outer > .container,
#main-content > .container,
div.et_pb_row {
width: 90% !important;
}
}
It's the same as above, but removes the rule affecting fullwidth rows. I'm not entirely sure why I have that rule in there, but I think there was some cases where it was useful. When I have a chance, I'll have a think… but hopefully this version helps you now!
Hi Dan –
Thanks so much! I am not sure why, but I am getting multiple RBRACE errors when I input that code – on line 6, 8 and 9. It looks fine to me but Divi is objecting! Any ideas?
Ah, there was a comma in there that Divi did not like. So it is now going through but still adding in the 10% space on left and right of full-width sections. If you have any ideas, do pass along!
Ah, sorry about that. I'm glad you caught the extra comma – I've just updated my comment to remove it. Are you able to point me to one of the full-width sections where you're seeing the 10% space? Looking at the full-width section at the top of the homepage (i.e. the one with the "Teach your children to read without guessing…" header), I can see it being set to the full-width of the page (no 10% space). My guess is that on full-width sections where you're seeing the 10% spacing, it is being added by the row within that section (i.e. the row width is set to 80%). If so, you should be able to get rid of it within the row settings, by setting the row width to 100%. But I'll be able to tell you more if I see an example. Thanks!
Hi Dan,
I set it to 90% and it works great on all parts of my site except for the product detail pages. On the detail pages, it cuts off the background on the sections portion of the description. So the back ground only extends 90% of the width and there is white space on the left/right.
Thanks,
Dan
Hi Dan, is there any chance you're able to send me a link to one of the product detail pages so that I can take a look at how you have things set up? Thanks!
Thanks that was a great help. A bit of a let down it's not built into any of the Divi mobile settings. My two cents is in reality, everything should be geared toward the mobile compatibility these days as the default. It's a little counter-intuitive, but I think it's come to this mentality before long: "build your site for mobile… and when you get time, make it look good on desktop too."
Best,
–jody
You're welcome, Jody, and you make a good point. I'm sure this will end up as a setting in Divi eventually, and hopefully there's be more mobile-centric options to accompany it. In the meantime, let me know if there is any thing specific you'd like to be able to do for your sites on mobile and I'll try my best to help :)
worked great
thanks!!!!
Thank you SO MUCH! I only used it for the main nav, but it is SO much better.
Hi Dan, I tried
@media only screen and (max-width: 980px) {
#top-header > .container,
#main-header > .container,
#et_search_outer > .container,
#main-content > .container,
#main-footer > .container,
#et-footer-nav > .container,
#footer-bottom > .container,
div.et_pb_row,
div.et_pb_row.et_pb_row_fullwidth {
width: 90% !important;
}
}
But unfortunately this doesn't work. I have also tried searching for these selectors and cannot find them in the console.
Ah it does work! I had a typo! Thanks a lot, my site is much better now! Cheers!
You're welcome, Horace :)
Hi, Dan,
The Booster plugin has really helped out a lot … nice job.
I'm on Version 2.5.7 and tried the mobile width setting under Layout but it doesn't change the width. Your CSS did however.
Site is https://judithhannahweiss.com/. Please let me know if I'm missing something or if the plugin needs a bit of work.
Thanks!
Chuck
Hey Chuck. The default width in Divi is 80%. I can see that Divi Booster's code is being applied and is working. However, it looks to me like the width you have set in Divi Booster is also 80%. As this matches the Divi default you won't see any change in width. Does it work if you set it to something else, e.g. 90% (as you have set in the CSS version)? If not, try clearing the caches of any performance plugins you have installed as they may be blocking the latest Divi Booster changes from showing up. Let me know if it still isn't working after that. Cheers!
Dan,
I can't recall exactly how this worked out, but it did … thanks!
Chuck
Ha ha! Great, I'm glad it's working now, Chuck. Thanks for letting me know :)
With regards to full width, you say best to adjust each row (time consuming) because it may create issues with wanting full control?
Wouldn't you just be better off messing with the individual sections with padding and margin etc and go with the global ccs control?
for the sections you don't want to be controlled by the global css i mean
Hey nick, I've just looked into this further and it seems like I was mistaken. I had originally thought Divi was using the same CSS when setting the default width as it was when setting row custom widths. This would have meant that any global CSS would have overwritten both the default and the custom widths, causing the problem I was discussing. There wouldn't have been a CSS-only way to override just the default. It turns out this is not actually the case – the custom row widths are being set using max-width whereas the default uses just width.
However, it looks like the custom row widths don't actually apply to mobiles / tablets at all, only on desktops. This means that all rows end up as 80% on mobile whether they have a custom row width set or not. So we can just override this 80% default with our own value and we're not going to be screwing up the (desktop-only) effects of the custom row widths.
I've updated the post / code above to apply to builder pages as well. I'll include the update in the next version of Divi Booster (2.4.9). Cheers!
Hi Dan,
When I activate the mobile width option of the plugin and set the width to 90% it seems to have no effect on my mobile viewport.
I have cleaned the cache of the database.
Would love to see it work.
Hi, the option originally didn't apply to divi builder pages as I thought that would mess with the ability to set custom row widths within builder. However, that turns out not to be the case, so I've updated the plugin to modify the mobile width on divi builder pages as well. Can I get you to try updating to the latest version (2.4.9) and see if that has the desired effect. Please let me know if not. Thanks!
Oh my GAAAAWD! Absolute lifesaver! Ok, maybe a little OTT, but This has been bugging me for AGES! I think the 80% width as standard is just wrong for mobile. I'm pretty sure elegant themes actually agree though, as their new theme on their own website is more like 90%. Anyway, implemented and works great! You can see your handy work here: http://bricksblog.com
Thanks again! :)
Ha ha! You're welcome, Em! Yeah, I like 90% more than 80% too :)
Hey Dan,
Thanks for the quick response. I will try it out.
Best regards
Hi there,
in my Divi Booster there is no “Site-wide Settings > Layout > Set mobile content width”.
The code above does not work, too.
I am using Divi 3.0
Best regards,
chris
Hi Chris,
I've just released v2.4.6 of Divi Booster, which contains the new feature – if you update you should see it.
But looking at your test site, I can see that your site is mainly built using fullwidth pages. My code doesn't adjust the width of content in the fullwidth pages as this can be controlled within Divi Builder itself (e.g. using row widths) and overriding it would prevent any further customization of the row widths (on mobiles, at least). I've added a section to the post above explaining how this can be handled.
I hope that helps,
Dan