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.

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.

1 Like

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;
}
1 Like

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