Css for Full Width "Custom Collection Container"?

[Developer_Reel_Mood]

Anyone here have a compiled css string to turn a "custom-collection’ into a full width?

Ive been trying to get this done for a few weeks now.

My custom collection identifier is: channel-guide

Ive tried the following codes and nothing is working. Any advice would be greatly appreciated. css styles ive tried, and still doesn’t work:

div[class*="channel-guide"] {
max-width : 100% !important ;
width : 100% !important ;
padding : 0 !important ;
margin : 0 auto !important ;
}

and

#page-root div[class*="channel-guide"] {
    width: 100% !important;
    max-width: 2000px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

Any guidance?

[ThinhDinh]

Can you specify what settings you have for your Custom Collection? Do you have some screenshots to share? Thank you.

[Himaladin]

Try to avoid using !important unnecessarily. Using it can override other styles and break the expected hierarchy of your CSS. This approach may lead to more issues later, making your CSS harder to manage and causing potential conflicts with other styles.

[Developer_Reel_Mood]

Hey there,

I have a 2:1 settings for my custom collection. I’m also trying to do full width for all my collections in addition as well.

For some reason, I was able to nail the css for a regular container for a full width:

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

But, i’m having a problem identifying the style for custom collections and collections. Any help would be greatly appreciated.

[Eric_Penn]

I use this one from ThinhDinh. Maybe it just needs a little adjustment. Using 100vw/ 95vw is much better than 2000px because vw is calculating the ‘viewport width’ in percentages.

div[class*="section-container"] >div {

max-width: 100vw;

}

div[class*="container-padding-md"] {

max-width: 100vw;

}

div[class*="single-column justify-center"],

div[class*="renderer___StyledDiv6"]{

max-width: 100vw;

}

[Developer_Reel_Mood]

You were right about the viewport width, that worked. Thanks so much.

Dropping the line below for anyone else that might run into this problem.

div[class*="container"] {
max-width: 100vw;
}