All Collections
Divi Documentation
How to fix the Theme Builder Post Content Module width
How to fix the Theme Builder Post Content Module width

What is the Post Content module and how it can affect the layout width

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

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

  1. The Page/Post has a Divi Layout

    Single Page Layout

  2. In Divi > Theme Builder, there is a template assigned to the Page/Post

    Theme Builder Page Template

  3. The Custom Body contains the Post Content Module

    Post Content Module

  4. The layout of the Page/Post on the front end is a lot smaller:

    The page layout is not fullwidth

    That's because the Post Content module is placed inside a Row that, by default, has a width of 80% and a max-width of 1080px. That means the Page layout will only be as wide as 80%.

Fix the page layout's width

  1. Edit the Custom Body of that particular template, edit the Row that contains the Post Content module

  2. Go to Design Tab > Sizing

  3. Set the Width and Max Width to be 100%

    Set the Row width and max-width to be 100% fullwidth

With the correct settings, the page layout will be full-width, as seen in the screenshot below:

Post Content shows the Fullwidth page layout

Pro tips:

  1. Best practice suggests placing the Post Content module in its Row.

  2. The Row's top and bottom padding containing the Post Content module should be set to 0.

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

Did this answer your question?