[Support request] Defnied size width does not apply

[Sascha]

Hi

on this site I have added 2 hook elements:

Name: Hook: Site Wrapper (Open)
Code:

Hook: generate_before_header

Name: Hook: Site Wrapper (Close)
Code:

<!– .site-wrapper –>
Hook: generate_after_footer

so that the any container set to “full-width” will not expand beyond the 1200px as defined per Customizer > Layout > Container or Child-Theme. In the Child-Theme I have added a style.css which container this declaration (among others):

/* Site Wrapper to set overall site max width */
.site-wrapper {
width: 100%;
max-width: 1920px;
background-color: var(–body);
}

Unfortunately, this is not working. When I zoom-out via the browser, I can still see the hero-image extend the pre-defined max-width.

Any idea about how to troubleshoot and solve this?

Please find admin-credentials in Private information.

Thank you in advance and kind regards,
Sascha

[Ying]

Hi there,

The align full option is from WP, its CSS makes it go full width regardless of the container width.

So you don’t want the containers to go full width, but go 1920px max?

Let me know!

[Sascha]

“So you don’t want the containers to go full width, but go 1920px max?”

Yes 🙂

[Fernando]

Hi Sascha,

I noticed this topic has already been marked resolved. To clarify, would you still need assistance with regards to this?

[Sascha]

Oh, I marked by accident, thanks for pointing this out 🙏

Yes, I have set the container width to 1000 in customizer for the content. Then, I have created a wrapper as mentioned above, so when I set a container to full-width, it never expands over the 1920px.

Regarding the sizing/spacing of body, content etc., I want to create the layout same as Kyle is doing it on his websites https://ogalweb.com/ and https://theadminbar.com/, where the full-width images never expand to 1920px.

But apart from making it work, I have also trouble to set the body-gb-colour in customizer, which seems to work in customizer (as you can see here), but not reflected on the frontpage (check here).

Also, the hero-header container is still exceeding the 1920px limit as defined in the “wrapper”.

Hope you can help.

Thank you in advance and kind regards,
Sascha

[Sascha]

Oh, by the way: The body-bg-colour seems to not work on other sites too:

I have created a demo-site with a dark red bg-colour, check this screenshot. But it does not show on the frontend (check this url).

[Fernando]

Let’s try to tackle the width first. Out of curiosity, why not use a Layout Element to set the content width of your site?

[Sascha]

Thanks, Fernando, I had tried already.

Customizer > Layout > Container: 900px
Elements > Layout: 1920px

But it does not work, as you can see on this screenshot, where the content remains within the 900px, but the full-width container exceeds the 1920px.

Also, I had set the bg-colour to light-blue, as you can see here. But on the frontend it’s not showing.

Thank you in advance and kind regards,
Sascha

[Fernando]

In your Layout Element, can you check if the Content Area is set to Full width? If not, can you try that?

As for the color, you have this code taking precedence in your style.css file:

body {
	background-color: var(--outside-container);
}

[Author]

Posts