Responsive site width?

[Kobber]

Hi,

I’m designing a full width website and I like the site width of 88% (set in Theme Options) on mobile, but 88% on larger screens gives me to much margin to left and right.

It would have been great if you had implemented the same responsive styling here as in other elements of the builder ;). But since not - is there any other way to control it besides turning global container of and play with the padding (which would be rather dull throughout the site)?

[tristup]

Hi @Kobber,

Thanks for reaching out.
After you disable the Global Container option in the Row, you can adjust the width for the specific breakpoint instead of padding.

Hope it helps.
Thanks

[Kobber]

Hi @tristup,

Thanks I know but then I have to do it on every row on the site. I was hoping that there was a way to set the site width once for the whole site at different breakpoints.

In theme options it’s only possible to set one value regardless of screen size. As an example; 88% is great on mobile but on screens above 1200px I would like 95%.

[ruenel]

Hello @Kobber,

Regretfully we do not have a responsive settings for the Site Width of the Theme Options. You would be needing a custom CSS for that to override the Theme Options on large screens.

Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

Dev Tools demo

In your case, click on the Row element and find the class selector. For example;

@media(min-width: 1200px){
    .x-row.width {
        width: 95%;
    }
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.