Hi
Anyone know CSS to make containers “full width” (95vw)?
I can make the whole window 95vw with this:
But containers stay the standard Glide ~1200px wide.
//Danny
Hi
Anyone know CSS to make containers “full width” (95vw)?
I can make the whole window 95vw with this:
But containers stay the standard Glide ~1200px wide.
//Danny
You can try this.
Dosn’t work/change anything.
What settings do you use for the container? I haven’t tried but the class name may change if you use different types of containers.
I have just tested with all containers (full, 1:1, 2:1 …), none of them are affected by
div[class*="full normal container"] {
max-width: 2000px;
}
When i add
#main-root div[class*="justify-center"] {
--container-x-pad: 30px;
max-width: 95vw;
}
Everything outside containers is moved to edges.
The only thing i can get to affect containers are
--container-x-pad: 30px;
(moves the inside padding in full containers)
Hmm, thats wird. Can you share the whole CSS you use?
Btw, thanks for the help with this
Ahhh, ticking on “Use compiled CSS” did the trick
Thanks.
Do you know class* for 1:1, 1:2, 2:1, 3 row and 4 row container?
For anyone else:
div[class*="full normal container"] {
max-width: 95vw;
}
Works too.
Did some digging, and found other containers.
Class* is:
full normal container
oneToOne normal container
twoToOne normal container
oneToTwo normal container
threeColumns normal container
fourColumns normal container
Using “max-width: 95vw” works perfect in first testing.
Thank you for sharing!
Card “styled” containers dont work with this, and i i still need to find class for navigation bar.
What do you need to do with this?
div[class*="section-container"] >div {
max-width: 95vw;
}
div[class*="container-padding-md"] {
max-width: 90vw;
}
Thanks
Originally I wanted to make the top bar full width (icons in bar). But since I now have so much space vertically on the page, I have switched to sidebar instead.
@ThinhDinh thanks alot for all the help, i now have a great layout with more “room”.
Great to hear Danny! Glad I could help.
@ThinhDinh could you please help me apply “Full Width” to a Custom Collection 1:3 and Full? TIA
Here’s 1:3 but probably you would have to work with the components inside as well to make it look right.
Same for full.
div[class*="single-column justify-center"],
div[class*="renderer___StyledDiv6"]{
max-width: 95vw;
}
I ran into a similar thing, where I made the container full-width, and would like the nav bar to also be full-width. Right now, it looks a bit weird since the nav bar is not as wide as the contents inside the page.
I’ve tried inspect element and fiddled with the settings, but can’t find the exact class which will change the Nav bar’s width to 95vw.