How to keep a different page width for content pages on Desktop & Mobile ?

[ShabanaYasmin]

Hi, I'm using Icon Theme. Home & product pages are fine but Content page width is an issue.

There is a setting to change page width to THIN or FULL but it applies to both desktop & mobile.

Thin looks good on Desktop but not on Mobile & full width is better on Mobile but not Desktop.

So I want to keep page width Thin on Desktop & full width on mobile. How can I do that ?

Page Link - https://www.streefb.com/pages/video-tutorials

Thin

[Kinjaldavra · Accepted solution]

@ShabanaYasmin  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 999px){
#shopify-section-page-template .grid_wrapper {
    display: block !important;
   max-width: 100% !important;
}
}

[ShabanaYasmin]

Hi, There's no ( assets/theme.css ) but ( assets/theme.js ) for me.

Still tried adding the code in that but nothing changed.

[ShabanaYasmin]

This is forcing Full-Width on Desktop & Mobile, even if Theme Editor setting is for Thin View.

I want otherwise, force Full-Width but on Mobile only, so I can keep Thin view on Desktop.