Using the full width of the browser window

[Andrew_Davies]

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

[ThinhDinh]

Css for Full Width "Custom Collection Container"?

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?

[Andrew_Davies]

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

.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