Global deep styling of ionic components

How do I add a global, deep style for ion-content to be max-width: 500px ? I’ve tried several variations of :host >>> ion-content { max-width: 500px; } at the global and app component levels. I’m using the sidemenu starter and want the desktop ion-content view width to be constrained.

I can only get it to work when I drop ion-content { max-width 500px; } into every page scss file. I want to define it once at the global (app component) level.

you add it to the global.scss file.

Wow. I swear I tried that and it didn’t work. But after you say it, it now works! :slight_smile: Ha.

So yeah, I just put ion-content { max-width 500px; } into global.scss, and it indeed works.

1 Like