A Simple Solution To The Post Content Width Issue
We absolutely love the Divi Theme Builder! It is an exceptional tool that makes building websites with Divi a lot easier. We love it so much we wanted others to learn to use it too, so we created the Divi Theme Builder Course for you that is only $20 and will get you started with this great too. But something you may run into as you start to use the Theme Builder is an issue with the width of the content in the Post Content module. This only happens when you use the Divi Builder on the page/post. The reason it does this is not a bug, but it actually makes sense. Watch the quick video to learn how easy this is!
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
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.
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!
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 :)
How To Make Rows Inside The Post Content Module 100% wide Using Divi Assistant
Here are the simple steps to make rows inside the Divi Post Content module 100% wide using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Utility Helper tab and the Visual Builder subtab
- Enable the setting
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (141) main features to make your life easier when working with Divi!
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%?
Hi Raquel,
That is strange because this code is not in a media query, it is not limited to device and would apply to all devices.
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.
That’s great George, I’m so glad Google likes me and you could find that confirmation!