Changing the Website Content Width on Mobiles

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:

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


  1. Abby Buzon

    Thank you SO MUCH! I only used it for the main nav, but it is SO much better.

  2. Horace

    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.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.

    • BaldGuyStudio

      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 Please let me know if I'm missing something or if the plugin needs a bit of work.



      • dan

        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!

        • Chuck Moran


          I can't recall exactly how this worked out, but it did … thanks!


          • dan

            Ha ha! Great, I'm glad it's working now, Chuck. Thanks for letting me know πŸ™‚

    • Horace

      Ah it does work! I had a typo! Thanks a lot, my site is much better now! Cheers!

      • dan

        You're welcome, Horace πŸ™‚

  3. nick

    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?

    • nick

      for the sections you don't want to be controlled by the global css i mean

      • dan

        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!

  4. Websites Tenerife

    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.

    • dan

      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!

  5. Em @ Bricks Blog

    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:

    Thanks again! πŸ™‚

    • dan

      Ha ha! You're welcome, Em! Yeah, I like 90% more than 80% too πŸ™‚

  6. Christoph Speidel

    Hey Dan,

    Thanks for the quick response. I will try it out.

    Best regards

  7. Christoph Speidel

    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,


    • dan

      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,


Submit a Comment

Your email address will not be published. Required fields are marked *