Full width Desktop - Containers

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)

Well I think it works in my case.

With CSS

Without CSS

Hmm, thats wird. Can you share the whole CSS you use?
Btw, thanks for the help with this :slight_smile:

Just this one.

div[class*="full normal container"] {
max-width: 2000px;
}

Ahhh, ticking on “Use compiled CSS” did the trick :slight_smile:
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.

1 Like

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.

2 Likes

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;
}
2 Likes

Thanks :smiley:

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

1 Like

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 :pray:

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;
}
3 Likes

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.