# Full width Desktop - Containers

**URL:** <https://community.glideapps.com/t/full-width-desktop-containers/68194>\
**Category:** Ask for Help\
**Created:** [November 28, 2023, 12:30pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194 "2023-11-28T12:30:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Danny\_Nielsen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/danny_nielsen/32/61765_2.png) [@Danny\_Nielsen](https://community.glideapps.com/u/Danny_Nielsen)\
**Post date:** [November 28, 2023, 12:30pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/1 "2023-11-28T12:30:47Z")

</div>

Hi

Anyone know CSS to make containers “full width” (95vw)?

I can make the whole window 95vw with this:

> [@Web app in full width?](https://community.glideapps.com/t/web-app-in-full-width/62865/2):
>
> You might be able to do it with CSS on a Business/Enterprise plan. I still think there needs to be some left and right padding here, but it’s basically what you want. #main-root div[class\*="justify-center"] { --container-x-pad: 10px; max-width: 95vw; }

But containers stay the standard Glide ~1200px wide.

//Danny

---

<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:** [November 28, 2023, 11:55pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/2 "2023-11-28T23:55:48Z")

</div>

> [@Web app in full width?](https://community.glideapps.com/t/web-app-in-full-width/62865/6):
>
> div[class\*="full normal container"] { max-width: 2000px; } Please try to add this for components inside a container. Let me know if it works. The max-width being 2000 here is just an arbitrary number. Try to increase if it doesn’t fully work for you.

You can try this.

---

<div class="post-metadata">

**Author:** ![Danny\_Nielsen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/danny_nielsen/32/61765_2.png) [@Danny\_Nielsen](https://community.glideapps.com/u/Danny_Nielsen)\
**Post date:** [November 29, 2023, 7:14am UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/3 "2023-11-29T07:14:11Z")

</div>

Dosn’t work/change anything.

---

<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:** [November 29, 2023, 11:21pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/4 "2023-11-29T23:21:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Danny\_Nielsen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/danny_nielsen/32/61765_2.png) [@Danny\_Nielsen](https://community.glideapps.com/u/Danny_Nielsen)\
**Post date:** [November 30, 2023, 2:24pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/5 "2023-11-30T14:24:22Z")

</div>

I have just tested with all containers (full, 1:1, 2:1 …), none of them are affected by

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

```

When i add

```auto
#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)

---

<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:** [November 30, 2023, 11:20pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/6 "2023-11-30T23:20:13Z")

</div>

Well I think it works in my case.

**With CSS**

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/2/92c89470532ef0b82dbdc0e33347895931cc8375.png)

**Without CSS**

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/3/93a71b5d0baf3c168435bb1deb5e597dc4509563.png)

---

<div class="post-metadata">

**Author:** ![Danny\_Nielsen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/danny_nielsen/32/61765_2.png) [@Danny\_Nielsen](https://community.glideapps.com/u/Danny_Nielsen)\
**Post date:** [December 1, 2023, 6:45am UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/7 "2023-12-01T06:45:17Z")

</div>

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

---

<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:** [December 1, 2023, 12:56pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/8 "2023-12-01T12:56:51Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/a/fae20043a4f328d906a41f0396f113e18bceb2ca.jpeg)

Just this one.

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

```

---

<div class="post-metadata">

**Author:** ![Danny\_Nielsen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/danny_nielsen/32/61765_2.png) [@Danny\_Nielsen](https://community.glideapps.com/u/Danny_Nielsen)\
**Post date:** [December 1, 2023, 1:31pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/9 "2023-12-01T13:31:38Z")

</div>

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:

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

```

Works too.

---

<div class="post-metadata">

**Author:** ![Danny\_Nielsen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/danny_nielsen/32/61765_2.png) [@Danny\_Nielsen](https://community.glideapps.com/u/Danny_Nielsen)\
**Post date:** [December 4, 2023, 9:54pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/10 "2023-12-04T21:54:10Z")

</div>

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.

---

<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:** [December 4, 2023, 11:43pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/11 "2023-12-04T23:43:58Z")

</div>

Thank you for sharing!

---

<div class="post-metadata">

**Author:** ![Danny\_Nielsen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/danny_nielsen/32/61765_2.png) [@Danny\_Nielsen](https://community.glideapps.com/u/Danny_Nielsen)\
**Post date:** [December 5, 2023, 6:53am UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/12 "2023-12-05T06:53:34Z")

</div>

Card “styled” containers dont work with this, and i i still need to find class for navigation bar.

---

<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:** [December 5, 2023, 11:36pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/13 "2023-12-05T23:36:08Z")

</div>

> [@Danny\_Nielsen](#):
>
> i i still need to find class for navigation bar.

What do you need to do with this?

---

<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:** [December 5, 2023, 11:54pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/14 "2023-12-05T23:54:25Z")

</div>

> [@Danny\_Nielsen](#):
>
> Card “styled” containers dont work with this

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/f/4f842cb0eb0fbd61b115c5d266b63b47c131481b.png)

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

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

```

---

<div class="post-metadata">

**Author:** ![Danny\_Nielsen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/danny_nielsen/32/61765_2.png) [@Danny\_Nielsen](https://community.glideapps.com/u/Danny_Nielsen)\
**Post date:** [December 6, 2023, 6:39am UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/15 "2023-12-06T06:39:02Z")

</div>

Thanks 😃

---

<div class="post-metadata">

**Author:** ![Danny\_Nielsen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/danny_nielsen/32/61765_2.png) [@Danny\_Nielsen](https://community.glideapps.com/u/Danny_Nielsen)\
**Post date:** [December 6, 2023, 6:45am UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/16 "2023-12-06T06:45:54Z")

</div>

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

---

<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:** [December 6, 2023, 12:51pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/17 "2023-12-06T12:51:28Z")

</div>

Great to hear Danny! Glad I could help.

---

<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:** [December 6, 2023, 8:36pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/18 "2023-12-06T20:36:23Z")

</div>

@ThinhDinh could you please help me apply “Full Width” to a Custom Collection 1:3 and Full? TIA 🙏

---

<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:** [December 6, 2023, 11:31pm UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/19 "2023-12-06T23:31:00Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/7/b750a6448d33817fcfc030814dc760c098a755af.png)

Here’s 1:3 but probably you would have to work with the components inside as well to make it look right.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/5/55aaf024e22f7766cdc8d2ec1878ef374f37a55d.png)

Same for full.

```auto
div[class*="single-column justify-center"],
div[class*="renderer___StyledDiv6"]{
max-width: 95vw;
}

```

---

<div class="post-metadata">

**Author:** ![Jarvis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jarvis/32/81377_2.png) [@Jarvis](https://community.glideapps.com/u/Jarvis)\
**Post date:** [June 4, 2024, 12:18am UTC](https://community.glideapps.com/t/full-width-desktop-containers/68194/20 "2024-06-04T00:18:23Z")

</div>

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.

[Next page](https://community.glideapps.com/t/full-width-desktop-containers/68194.md?page=2)