The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

Learn More

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

10 Comments

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

    Reply
    • nick

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

      Reply
      • 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!

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

    Reply
    • 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!

      Reply
  3. 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: http://bricksblog.com

    Thanks again! 🙂

    Reply
    • dan

      Ha ha! You’re welcome, Em! Yeah, I like 90% more than 80% too 🙂

      Reply
  4. Christoph Speidel

    Hey Dan,

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

    Best regards

    Reply
  5. 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,

    chris

    Reply
    • 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,
      Dan

      Reply

Submit a Comment

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