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 {

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