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

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. If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*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%;
}

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
21

Last updated Aug 31, 2021 @ 11:15 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

OUR ONCE A YEAR SALE IS HAPPENING NOW!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

21 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)

      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
      • Maddy Pimentel

        I tried this, but it didn’t work. There is still a huge space between the post image and the post body. Any other tips?

  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

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart