Change media width in renew

[MeesterOntwerpers]

Hi, it’s my second time asking for support, please be gentle

In Renew, breakpoints goes between certain pixels,
I would like to change column stacking, on one page (home page), something like this

/* On screens that are 1159px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1159px) {
.row {
flex-direction: column;
}
}

But I can’t seem to make it work, what (of course a lot) am I doing wrong?

Kind regards
Soejon

[rad]

Hi @MeesterOntwerpers,

Thanks for reaching out.

Should be like this

@media screen and (max-width: 1159px) {
.home .x-column {
width: 100% !important;
margin: inherit 0px !important;
float: none !important;
}
}  

Thanks!

[MeesterOntwerpers]

Hi @Rad,

Thanks for your quick response, unfortunately it does not seem to do the trick,
would you mind take a look at the site I’m working on?

Kind regards
Soejon

[basanta]

Hi There,

Thanks for the details.

Please add this CSS instead of the above.

@media screen and (max-width: 1159px) {
.x-section .x-container.marginless-columns>.x-column {
    display: block !important;
    width: 100% !important;
}
}

Hope this helps!

[MeesterOntwerpers]

Hello @basanta,

Thank you very much! Solved!

Kind regards
Soejon

[basanta]

you are most welcome!