Globals: Container (Div) Max Width

Hi. How can I set the max-width to a container globally? I have been following the documentation and added the max-width values under “Globals” (see screenshot 1). However, when I try to apply this style to a container the class does not show up under global styles (see screenshot 2). Any ideas what I am doing wrong?

My overall goal is to have the max-width of the website set to 2560px - without having to apply this value to each div container individually. Thank you!


Hi,
If you remove your class name, it should work :wink:

Without a class, it is considered as default value, and with a class, used to define a kind of utility class.

Thank you yankiara. For some reason this doesn’t work on my end. Isn’t the Cwicly documentation saying something different? Basically that you have to add a class to the Globals. See here: Container - Documentation

Doc says you CAN, but you don’t have to.

The first example Container #1 is without, targeting default, second Container #2 is with a class, targeting specifics.

Maybe you have an interfering rule somewhere on the block itself?

2 Likes

Thank you yankiara! I obviously did not read the “fine print” :slight_smile: However, when using inspect element, it does indeed show the section max-width value:

body {
    --section-max-width: 2560px;
}

However, it seems to have no effect at all. The content within div’s (sections) doesn’t stop expanding at 2560px but expands infinitely, no matter how wide the browser window is. So, I am still not sure how to define a max width for all of the content to max 2560px… Any ideas how to make this work?

OK, so it looks like you want to “box” the whole site, and I agree with you, I do it on all my sites to prevent horrible things when zooming-out in the browser, especially with full width backgrounds or absolute elements.

I use this CSS in my stylesheet (don’t know how to style body with UI):

body {
    max-width: var(--w-body);
    margin: 0 auto;
}
1 Like

Or maybe I didn’t understand well, do you use divs in your sections which are not .cc-cntr containers?
In this case it’s normal that your divs grow since the max-width does apply to .cc-cntr only.

Thanks yankiara. The code which you have provided works.