[Resolved] Pages created with a content template do not show fullwidth

[Author]

Posts

[Daniel]

Hi Nigel,
I am building a site with Toolset, Divi and WPML.
I have created several content template and pages created with those templates.

After updating to Divi 4.0.7, the formatting of those pages (created with content template) are not showing fulldwith. I have chosen "Fullwidth as the layout". Please see screenshot attached which corresponds to page hidden link

I hope you can help me with this.

Thanks
Daniel

[Luo Yang]

Dear Daniel,

It is a CSS problem, and the problem CSS codes are from Divi theme, for example, you can open the URL you mentioned above with Chrome browser:
hidden link
Press F12 key, you will be able to locate the problem CSS codes:
In this case, you can check the CSS file:
hidden link, codes:

.et-db #et-boc .et-l .et_pb_row{position:relative;width:80%;max-width:1080px;margin:auto}

And

.et_pb_pagebuilder_layout.single.et_full_width_page:not(.et-tb-has-body) #main-content .et_pb_row

Above CSS codes define the content width, you can disable them and test again, see screenshot: div-css.JPG

And according to our blog post:
https://toolset.com/2019/10/toolset-and-divi-4-issues/
We have some compatibility issues with Divi theme version 4
we recommend to our clients to stay with Divi 3 on sites that have both Divi and Toolset.

[Daniel]

Hi Luo,
What can I do now? could you please give me a temporary CSS code to fix this issue?
Did you warn ElegantThemes about this?
Thanks!
Daniel

[Luo Yang]

There is a misunderstand, the content template is full-width, but that row mentioned in your screenshot is not full-width.
I am not the best source for such Divi problem, you might consider to ask help from Divi support for how to insert a full-width row.

And currently, it is possible to fix this with custom CSS codes, for example, you can try these, edit the content template:
hidden link

Find and edit "row", add a CSS class name: my-full-width-row

Then use CSS codes to customize it, like this:

.my-full-width-row{ 
  width:100% !important;
  max-width: 100% !important;
}

I just tried it in your website, it works fine.

[Daniel]

My issue is resolved now. Thank you!