Why isn't this css being applied?

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.