Full width Desktop - Containers

[ThinhDinh]

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

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

div[id*="nav-root"] div[class*="section-container single-column"] {
max-width: 95vw;
}

[Jarvis]

Damn, you are awesome. Makes me wish I knew how to code.

[ThinhDinh]

That’s a big compliment! Feel free to let me know if you need any further help.

[l3oy8231]

Is there a way to adjust the CSS for the Big Number component to make it expand to the full screen?

[Himaladin]

Can you show me what components you are using? Do you use containers, custom collections or are your components the result of sorting, because I see the Big Number component is full width by default.?

[Tim_Gestels]

Is there a way you can do this for only specific containers?
The below code works for my but then it stretches everything.
Sometimes this looks a bit weird.

I would like to have this apply only for containers which I gave a specific css class.
But I don’t seem to get it to work with the help of ChatGPT alone :-/

Many thanks for your advice!

--- code from this topic that works for everything
#main-root div[class*="justify-center"] {
--container-x-pad: 25px;
max-width: 95vw;
}

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

[Danny_Nielsen]

#page-root .the-wide-container .normal {
max-width: 95vw;
}

Css-class for container is “the-wide-container”
Turn off compiled-css

[Tim_Gestels]

Thanks Danny !!! works like a charm!