What style changes do you apply for desktops?

I build an Ionic Web App. Some users open it on the desktop. The whole app is then streched which doesnt look nice.

What do you do in such cases? One idea is to center ion-content. Any idea how this works?

I use media queries for width larger than 768 px

That’s a great idea. Did you center ion-content? How did you do that with media query? I am no able to change it.

as long as I remember i did something like:

<ion-app class="main--container">
  <ion-router-outlet></ion-router-outlet>
</ion-app>

@media screen and (min-width: 1440px) {
    .main--container {
      margin: 0 auto;
      max-width: 35%;
      border-radius: 50px;
    }
}

doing this is already centered.
Otherwise you can always use display: flex

I’ve seen modern designs where the ion-header and ion-footer still have the full width but ion-content is centered. With which Framework are you working?

Well you can still have the content centered, you just need some css styling.
Angular

I am using React. In file variable.css I have this code to center the ion-title and the ion-content.

@media (min-width: 992px) {
    ion-header ion-title, ion-content {
        width: 50rem;
        margin: 0 auto !important;
    }
}

But the margin is not beeing completely overridden for the ion-content. At least what I think. It is described in this stackoverflow question:

1 Like