[Resolved] Reduced content width when using layout

[Author]

Posts

[Rune Brynestad]

I have a site built with the Divi theme. Content width is set to 980px in the Divi theme customizer. When I create layouts from toolset, the content width is reduced to 960px, and if I use the Divi builder in a custom post, it's further down to 760px content width. I want 980px all over.

On the home page, here's how the width should be. 980px
hidden link

Here's a custom post where the display is wrong.
hidden link

All elements from the Thailand image down to the comment section is made with Divi builder and have a content width of 760 px. Should have been 980px. The rest of the page is 960px content width, but should have been 980px.

Is it possible to have 980px all over?

Thanks in advice.

Regards
Rune

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Rune

You may need to make some tweaks to the CSS to achieve the results you want, at the moment there are CSS rules coming from the theme (Divi) and from Toolset which relies on Bootstrap.

When a Divi page builder section appears inside a

Bootstrap columns include padding, so where a Divi section appears inside a column it will shrink by the size of the padding, which you can reverse by adding a negative margin to the section equal to the size of the padding, e.g.

.col-sm-12 > et_pb_section {
    margin-left: -15px;
    margin-right: -15px;
}

As for the page with the Thailand section having a width of only 760px content, the rules for that seem to come from Divi itself, I see two rules for .et_pb_row, namely

.et_pb_row {
    max-width: 960px;
}
and
.et_pb_row {
    width: 80%;
}

You need to add a rule to overwrite the width and set it back to 100%.

[Rune Brynestad]

Hi Nigel

Thanks for looking into this. I'm affraid it did not worked as expected.
I put your code into the Divi custom CSS section.
The widths are still 950px and 760px

Regards
Rune

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Rune

Sorry for the delay getting back to you.

In that first CSS rule I missed the dot from et_pb_section, so it should be:

.col-sm-12 > .et_pb_section {
    margin-left: -15px;
    margin-right: -15px;
}

That should offset the padding in the Bootstrap column.

The second CSS I included was pointing out was wrong with the current CSS, not what you should change.

The Divi row has a width of 80% and you should overwrite that and set it to 100%. You may need to add !important depending on the order the CSS is loaded, like so:

.et_pb_row {
    width: 100%!important;
}

[Rune Brynestad]

Thanks for helping me. The widths are perfect now as far as I can see.

One more question. I need to add some more space betwenn the rows in Layouts. Where can I do that? An example here:
hidden link

1st row is the logo
2nd row is a Bootstrap grid made with wiews
3rd row is a static image
4th row is an unformated with pagination made with views

Thanks in advice.

Regards
Rune

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Rune

As you can see in my screenshot, these rows are each added in a div with the container class.

I added a bottom margin of 24px in that example. You can do the same adding the following to your custom CSS:

.container {
    margin-bottom: 24px;
}

[Rune Brynestad]

Looks good.

Thanks again for helping me.

Regards
Rune