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