Different row max width dependent on screen resolution

[roman777]

Hello,

I’d like to have the particular row max width as shown in the attached screenshot be different depending on the user’s screen resolution. In the attached screenshot, the max width is set to 55 EM, and I’d like it to be 65 EM for screens smaller than 1400px. How do I accomplish this? Media queries?

Thanks!

Roman

[christopher]

Hi there,

You do not have an option to have it on the pixels you mentioned. But you can use the theme breakpoints to do that. You will need to duplicate the same section you have and show/hide it in different screen sizes. Please read this article for more information.

You simply will have 2 versions of the same section which you can change the max width of them as you wish and show them in the screen size you see it fit.

Thank you.

[roman777]

Unfortunately the theme breakpoints are too broad. 1200px + encompasses a huge variation in screen size that is not sufficient. Is there not a way to do this with media queries?

[nabeel]

Hi again,

To do this with media queries, just give your row a unique class via Customize tab e.g custom-row and then add the following CSS code in the Theme Options > CSS:

@media screen and (max-width: 1399px) {
    .custom-row {
        max-width: 65em;
    }
}

You can add more breakpoints using the above code if you like.

Hope this helps!

[roman777]

Excellent! Thank you!

[nabeel]

You’re most welcome!