How To Fix The Divi Theme Builder Post Content Module Width Tutorial by Pee Aye Creative

How To Fix The Divi Theme Builder Post Content Module Width

Nelson Miller Pee Aye Creative
In this Divi tutorial I will show you how to fix the width of the Divi Theme Builder Post Content module when used with the Divi Builder.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

What Is The Divi Post Content Module Width Issue

So what exactly is the issue with the content width in the Divi Post Content module? Like I said, it is not a bug. It happens when yo use the Divi Builder to build the page or post content. All rows in Divi are set to a default width, so within the sections of the post or page you are adding rows that are not fullwidth. Again, this does not happen if you use Gutenberg to build the content of the post or page, but only when you use the Divi Builder.

Notice how the row in the Post Content module is so much more narrower than the other items in the image below.

Divi Theme Builder Post Content Module width issue

How To Make The Rows Wider In the Divi Post Content Module

Technically you could adjust the width and max width of all of your rows on any page or post that you know is going to be within a Divi Theme Builder template. But wow, that would get annoying. Why not just solve it once and for all? 

I have a very simple CSS snippet that solves the issue and makes your rows fullwidth automatically. You can copy and paste the code below into your website.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*set the width of the rows inside the Post Content module*/
.et-db #et-boc .et-l .et-l--post .et_builder_inner_content .et_pb_row {
	width: 100%;
}

In the image below you can see the instant result. The width issue is solved!

Divi Theme Builder Post Content Module width issue solved

Be sure to watch the video to see this all in action and to see how simple this solution is! We use it on our sites and couldn’t be happier. Let me know in the comments if you enjoyed this!

If you keep putting off learning about the Divi Theme Builder or have tried and need some help, be sure to check our Divi Theme Builder Course! Just look at the reviews :)

Divi Theme Builder Course YouTube Thumbnail
how to Make Rows Inside The Post Content Module 100% wide using the Divi Assistant plugin

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

55 Comments

  1. Erik

    Nice one
    DO you know if there is also a solution for all the annoying top and bottom padding.
    when you look at it closely its div within div, within div, within div, within div etc. and most have of these divs have a padding 2 of 4%

    Reply
  2. Dan

    Hey Nelson, have you experienced any problem with making a section fullwidth? If I set the width of a section to 100vw the section gets the right width but it appears with an offset to the right with respect to the viewport.
    Thanks for any suggestion!

    Reply
  3. Andi

    1 hour of pain to find an out of the box solution … where is none lol … thx for this snippet! made my day and saved a complex template

    Reply
  4. Jtm

    Awesome, this has been annoying me for a long time.

    Reply
  5. Richard

    Nelson,

    Thank you. Do you have a css snippet to reduce the top and bottom padding of the post content template?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Richard,
      Keep in mind the padding is not from the Post Content module, but rather the sections and rows shown within it. If the content is all within one section on the page, then you could do something like this:
      .et-l .et-l–post .et_builder_inner_content .et_pb_section {
      padding: 0;
      }

      Reply
    • Code Creation

      Teacher included a typo – code needs an extra dash:

      .et-l .et-l–post .et_builder_inner_content .et_pb_section

      Reply
      • Code Creation

        Actually, if you have multiple sections and rows in your content, divi numbers them automatically. So you can zero/adjust the top padding on the first scetion and therein contained first row by adding the following custom css:

        .et-l .et-l–post .et_builder_inner_content .et_pb_row_0 {
        width: 100%;
        padding-top: 0;
        }

        .et-l .et-l–post .et_builder_inner_content .et_pb_section_0 {
        padding-top: 0;
        }

  6. Jørn Haugland

    Thank you!
    This saved my day.

    Reply
  7. Betsy Pruitt

    Thank you so much for saving the day, Nelson! I’ve been playing with this for a couple of hours, and I’m so relieved to have this problem fixed.

    Reply
  8. Kathryn Calhoun

    OMG thank you so much! Grateful for you.

    Reply
  9. Ollie

    That’s awesome Nelson. Couldn’t figure out why where the width was coming from.
    Thanks for the post!

    Reply
  10. George Boyce <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    I was fighting this issue, did a google search and either google knows I like you a lot or you have great SEO. 🙂

    Then I was still stuck with a right margin, shown in “inspect”, but I couldn’t find where it was set. It turns out it wasn’t really a margin setting but rather the 80% max-width setting for the row that I had added to the post content. So I learned a bit about what inspect is telling me.

    Reply
  11. Dozza

    Nice one

    Reply
  12. Dave

    I’m not sure why, but this CSS addition didn’t work for me. Did anything change on Divi’s end since this was published? Does it matter in what Divi container (Column, section, etc) the Blog Content generates? Thanks for your tutorials!

    EDIT: I take it back, it’s working now! Not sure what changed 🙂 Thanks for your help!

    Reply
  13. Dave

    Hi Nelson,

    I was able to fix the width with your help.
    But unfortunately, I am not able to remove the padding at the top.
    There is still a wide gap between the text and the “inhoudsopgave” button.
    Can you help me solve this? Thanks in advance!

    Kind regards!

    Reply
  14. Dave

    Thanks for your swift reply.
    It worked! Thanks! I really appreciate your help!

    For everyone trying to solve the same thing:

    I used this code in the custom CSS settings:

    .et-l .et-l–post .et_builder_inner_content .et_pb_section {
    padding: 0;
    }

    Reply
  15. Lennart

    I had to remove the space in the first class:

    /*set the width of the rows inside the Post Content module*/
    .et-l.et-l–post .et_builder_inner_content .et_pb_row {
    width: 100%;
    }

    DiviVersion: 4.14.4

    Reply
  16. Alena

    Hi,

    this is great thanks. Unfortunatley, it is only working on my first blog module, not on the second one where I have a blog offset 1. Do I need a different snippet, please?

    Thanks

    Reply
  17. Daniel

    Thank you! I wanted to add that this worked on my default post types but when I built a custom post type, it didn’t work and I solved by adding “!important”. That fixed it. So if anyone finds that it isn’t working on certain post types, you might have to use this:

    /*set the width of the rows inside the Post Content module*/
    .et-l .et-l–post .et_builder_inner_content .et_pb_row {
    width: 100%!important;
    }

    Reply
  18. Wojciech

    Hello,
    After few years i updated wordpress and Divi, and my fullwidth were not fullwidth anymore. Or they were, but all rows were 80% (I have 100% in options of my rows). And this is a reason:

    .et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row {
    width: 80%;
    }

    I would love to know how to switch off that in Divi…

    Best regards

    Reply
    • Hemant Gaba

      Hi!

      I’m unsure of the actual cause of the problem. Make sure you are using the most recent version of the Divi theme. Is still getting the issue, can you please share the URL of the page for me so I can check it?

      Reply
  19. David

    Works like a charm! Thanks

    Reply
  20. Stell

    Hi Nelson,

    I am strangely having the opposite effect, our content with is too wide, but once we open the page builder and then exit the styles are applied

    Do you know why this may be happening?

    The blog post I attached was fixed by enabling divi builder then exiting – so strange?

    Reply
      • Hemant Gaba

        Hi Stell!

        I have opened the above page and it does not exist. Can you please check again and provide an alternative page if the page is deleted?

  21. Angelique

    Thanks for this tutorial. What if the post content module is in an own column itself (1 column divided in 3 columns, where the post content module is in the middle) ?

    Reply
  22. Raquel

    This code works great on desktop and mobile, but not on tablet. I’m using a CSS snippet to show two columns on tablet, but I can’t see how that would interfere. Any ideas on how to get this to work so I have both two columns on tablet and a post that fills 100%?

    Reply
  23. Aaron L

    Nelson, as you pointed out above, this snippet would apply to all devices. Which ends up not being a workable alternative in my opinion, for it puts the article text *right up to the very last pixel* of width on a mobile device. Though Divi’s 80% width default is obnoxious on desktop, for tablet and mobile it is appropriate. See example of what 100% width for post content looks like on mobile.

    Not great.

    Is there ANY way to force the 100% width **for desktop ONLY?**

    Reply
  24. Susi

    Thanks a lot! An easy fix for a this problem I had. Works like a charm.

    Reply
  25. Rolph

    This might be a bit of topic and related to other posts you already made. I’m already struggling a while in getting the image size in the dynamic post content to change.
    In my blog posts I usually add a media item and set it to ‘big.
    Unfortunately this is giving rather big images in my blog post. So, I changed it from to 2 or 3 rows. This is ok on desktop view, but on mobile they then appear too small.

    In what way could you have this image say presented 16-9 scale, for all images in one row?
    I tried with css adding on the divi theme builder side, but this does not work.

    Any thoughts?

    Reply
    • Hemant Gaba

      Hi Rolph!

      The CSS in the theme builder won’t work in this case. The issue could be due to the different image size rendering on the mobile view or any image optimization plugin that comes to play. Can you please share URL of any post where I can check the issue?

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart