# Css for Full Width "Custom Collection Container"?

**URL:** <https://community.glideapps.com/t/css-for-full-width-custom-collection-container/75700>\
**Category:** Ask for Help\
**Created:** [August 17, 2024, 10:44pm UTC](https://community.glideapps.com/t/css-for-full-width-custom-collection-container/75700 "2024-08-17T22:44:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Developer\_Reel\_Mood](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/developer_reel_mood/32/65407_2.png) [@Developer\_Reel\_Mood](https://community.glideapps.com/u/Developer_Reel_Mood)\
**Post date:** [August 17, 2024, 10:44pm UTC](https://community.glideapps.com/t/css-for-full-width-custom-collection-container/75700/1 "2024-08-17T22:44:48Z")

</div>

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:

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

```

and

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

```

Any guidance?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 18, 2024, 2:19am UTC](https://community.glideapps.com/t/css-for-full-width-custom-collection-container/75700/2 "2024-08-18T02:19:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 18, 2024, 2:47am UTC](https://community.glideapps.com/t/css-for-full-width-custom-collection-container/75700/3 "2024-08-18T02:47:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Developer\_Reel\_Mood](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/developer_reel_mood/32/65407_2.png) [@Developer\_Reel\_Mood](https://community.glideapps.com/u/Developer_Reel_Mood)\
**Post date:** [August 18, 2024, 3:08am UTC](https://community.glideapps.com/t/css-for-full-width-custom-collection-container/75700/4 "2024-08-18T03:08:37Z")

</div>

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.

 ![IMG_6304](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/b/0bfa6f4f66bcda57d760310f27d5847c82196cbb.jpeg)

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [August 18, 2024, 1:24pm UTC](https://community.glideapps.com/t/css-for-full-width-custom-collection-container/75700/5 "2024-08-18T13:24:21Z")

</div>

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.

```auto
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;

}

```

---

<div class="post-metadata">

**Author:** ![Developer\_Reel\_Mood](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/developer_reel_mood/32/65407_2.png) [@Developer\_Reel\_Mood](https://community.glideapps.com/u/Developer_Reel_Mood)\
**Post date:** [August 18, 2024, 6:56pm UTC](https://community.glideapps.com/t/css-for-full-width-custom-collection-container/75700/6 "2024-08-18T18:56:23Z")

</div>

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.

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

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [August 25, 2024, 6:56pm UTC](https://community.glideapps.com/t/css-for-full-width-custom-collection-container/75700/7 "2024-08-25T18:56:32Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.