I’ve tried applying the below CSS (taken from another forum post here) to limit the screen width on PCs. It doesn’t seem to be getting applied though. I’ve put it in the Ionic variables.css
file and also directly imported on a specific page like import "./mycss.css"
.
@media (min-width: 700px) {
.app-root {
width: 700px;
margin: auto;
position: relative;
}
.scroll-content {
overflow-y:auto;
}
}
When I open chrome DevTools it’s saying my width is 1536. So it should be getting applied but it’s not. What am I missing?
first of all, app-root and scroll-content are class names?
if yes, where are you using it?
For example, if you are using the class “app-root” like this:
<ion-app class="app-root">
<ion-router-outlet></ion-router-outlet>
</ion-app>
the css has to be written inside
app.component.scss
otherwise, if it’s a global css rule, inside global.scss
This made no sense to me… can you elaborate what you meant by:
"the css has to be written inside
app.component.scss
otherwise, if it’s a global css rule, inside global.scss"
Thanks
the css has “cokmponent” visibility, if you want to use a css rule inside a component, you must write it inside its scss file.
otherwise if you are writing a global css rules (for example a padding–top–16 class) that will be used in many components, you must write that rule inside global.scss file.