Change Divi's 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:

@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; 
   }
}
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".

44 Comments

  1. Hi Dan! Thank you for a very good guide. I added "#main-content .et_pb_row" to include pages created using the theme builder. I also noticed that increasing the width to 90% created sidescrolling, so I added "overflow-x: hidden!important;" to solve this issue.

    Reply
    • You're welcome, Johan, and thanks for the details of your fix.

      If I recall correctly, the reason I didn't include a rule for theme builder rows like this is that it would override any custom row width set in the row settings, preventing the row settings option from working. In some situations that won't matter, but it would stop the code from being usable on some sites. Plus, since it is possible to set the width from within the row settings it didn't seem quite as necessary to include it as it did to make sure that the mobile width could be set on other parts of the site for which Divi doesn't have any width setting.

      I've actually dealt with this issue already in Divi Booster. It uses some PHP code to add a class to the rows indicating whether or not they have a custom width set and so the mobile width can be ignored on rows which have their own width set. It's a bit involved, but when I get a chance I'll try and add the relevant PHP / CSS to the post here. When I do, I'll try to make sure both your case and the sidescrolling issue are covered.

      Thanks again!

      Reply
  2. Hello Dan, thank you very much! I noticed the code works everywhere except on pages created using the Divi theme builder. Do you know what class(es) I need to add?

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

    Reply
    • 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 ;)

      Reply
  4. Thanks very much for this!

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

    Reply
    • Hi Linda, I've updated the code to work with projects too. I hope it helps!

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

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

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

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

      Reply
      • Hey Dan,

        Fantastic! I'm happy to hear that and eagerly awaiting the next update!

        Thanks a lot Dan!

        Reply
        • You're very welcome, Tom!

          Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.