While using the Theme Builder template to build awesome templates for your website, you might have noticed that each time the Post Content Module displays the layout/content of a single post/Page, the layout of that Post/Page is smaller.
What is the Post Content module?
The Post Content module is essentially a wrapper/container used to display whatever the page/post layout/content is.
Since it is a Module, like any other module, it can only be placed inside a Row. As explained above, the Post Content Module is just a container.
That means the content/layout that the Post Content module will display will be as wide as the Post Content module's width.
The Post Content module's width is set by the width of the Row where it is placed.
How to fix the Layout width displayed by the Post Content Module?
The answer to this question is quite simple. Just set the Row that contains the Post Content Module to have the width and max-width set to 100% in Post Content's settings > Design Tab > Sizing.
Use Case
The Page/Post has a Divi Layout
In Divi > Theme Builder, there is a template assigned to the Page/Post
The Custom Body contains the Post Content Module
The layout of the Page/Post on the front end is a lot smaller:
That's because the Post Content module is placed inside a Row that, by default, has a
widthof80%and amax-widthof1080px. That means the Page layout will only be as wide as80%.
Fix the page layout's width
Edit the Custom Body of that particular template, edit the Row that contains the Post Content module
Go to Design Tab > Sizing
Set the
WidthandMax Widthto be 100%
With the correct settings, the page layout will be full-width, as seen in the screenshot below:
Pro tips:
Best practice suggests placing the Post Content module in its Row.
The Row's top and bottom padding containing the Post Content module should be set to 0.
The Section's top and bottom padding that contains the Row with the Post Content module should be set to 0.
You can check this Video Tutorial.