IonContent max-width for bigger screens?

My goal is to have IonContent be full width for mobile devices but have a decent sized margin on the left and right if the screen is wider than say 800px.

I’ve tried editing the CSS directly but it doesn’t do anything; i’m assuming something in Ionic is overwriting it and I’m supposed to work within the Ionic framework. But I don’t see a way to set max-width in IonContent.

I want something like…

@media screen and (max-width:800px) {
    .main-content {
        max-width: 800px;
        margin: auto;
    }
}

How would I go about doing this?

This is what I’m doing:

/* Desktop */
@media (min-width: 1280px) {
  ion-app {
    width: 1280px;
    margin: auto;
    position: relative;
  }

  .scroll-content {
    overflow-y:auto;
  }

More info: How to limit Ionic app width? - #4 by hudi

Seems great. But I’ve a popover, which is now not visible anymore (only the shadow overlay). Do you have an idea how to solve this?