# Using the full width of the browser window

**URL:** <https://community.glideapps.com/t/using-the-full-width-of-the-browser-window/86695>\
**Category:** Ask for Help\
**Created:** [March 19, 2026, 1:13pm UTC](https://community.glideapps.com/t/using-the-full-width-of-the-browser-window/86695 "2026-03-19T13:13:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)\
**Post date:** [March 19, 2026, 1:13pm UTC](https://community.glideapps.com/t/using-the-full-width-of-the-browser-window/86695/1 "2026-03-19T13:13:32Z")

</div>

Hello

Anyone know if I can make my Custom Collection wider? See screenshots.

This is a Data Grid component, set inside a Custom Collection component.

I have already added

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

Which made the bars across the top wider, but I am hoping to do the same with the Custom Collection.

Note I have separate views for Small and Large screen - so this would not be required for mobile.

Andrew

 ![PHOTO-2026-03-19-12-32-20](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/9/e993bd07afd09967510012f425b6514456054b15.jpeg)

 ![Screenshot 2026-03-19 at 13.07.57](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/2/522093d15c2b8dc59cf25e28f26ea5cb615d6a72.jpeg)

---

<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:** [March 20, 2026, 12:10am UTC](https://community.glideapps.com/t/using-the-full-width-of-the-browser-window/86695/2 "2026-03-20T00:10:06Z")

</div>

> [@Css for Full Width "Custom Collection Container"?](https://community.glideapps.com/t/css-for-full-width-custom-collection-container/75700/5):
>
> 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; }

Can you try this to see if it helps?

---

<div class="post-metadata">

**Author:** ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)\
**Post date:** [March 20, 2026, 2:20pm UTC](https://community.glideapps.com/t/using-the-full-width-of-the-browser-window/86695/3 "2026-03-20T14:20:00Z")

</div>

That worked perfectly! Thank you so much @ThinhDinh

I have also got it working for just one container (with custom CSS class detailDesktop) using this

```auto
.detailDesktop div[class*="section-container"] > div,
.detailDesktop div[class*="container-padding-md"],
.detailDesktop div[class*="single-column justify-center"],
.detailDesktop div[class*="renderer___StyledDiv6"] {
  max-width: 100%;
}

```

Thanks again!

Andrew

---

<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:** [March 27, 2026, 2:20pm UTC](https://community.glideapps.com/t/using-the-full-width-of-the-browser-window/86695/4 "2026-03-27T14:20:17Z")

</div>

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