How to limit Ionic app width?

Ionic Framework ionic-v3
1

Hi,
I’m using Ionic as a PWA app for mobile and desktop browsers.
The display on mobile is gorgeous. However, on desktop, it’s really too “stretched”.

What is the simplest way to limit the width of the app, on all pages? It would give the same aspect that the mobile app, on a desktop, which is not ideal, but better that this over-stretched thing.

I was thinking of using grid feature, but in that case I guess I would need to modify all my pages, one by one.
Is there a more generic soluwaytion to do that?

Thanks.

4 Likes
2

How about the following in app.scss?

body {
  max-width: ###px;
}
1 Like
3

The issue is Ionic use a grid-like system like Bootstrap to maximize compability and responsiveness. If you set a fix-width theme-wide, you’ll wreck the UI on many devices.

But hopefully, that doesn’t prevent you to use responsive CSS rules for desktop and very wide screens in your app global CSS. For example, to detect desktop screen size, I often use that kind of CSS rules (above 1000-1200 pixels screen width size), using @media CSS conditions.

// this rule will only trigger if screen width is above 1000px, so we assume it's a desktop or above, like HDTV
@media (min-width:1000px) {
.header-language-background{padding-left:20px; padding-right: 20px;}
.tabs-wrapper{padding: 0 20px;}
.row-blocs-home{margin:0;}
}
2 Likes
4

Thanks to both of you for your answers. I mixed your solutions with some blog stuff to finish with:

@media (min-width: 700px) {
  .app-root {
    width: 700px;
    margin: auto;
    position: relative;
  }

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

That way:

  • it’s really dead simple: I don’t need to touch any of my pages individually
  • with the media query it has no effet on mobile
5 Likes
5

That was the goal of my advice @hudi. Just take care 700px min width is too short, for tablets. So you might have a look on your overall CSS rules, maybe create 3 like i do in all my webdesigns:

  1. for moblie
  2. for tablets
  3. for desktop like and hd

You can create rules with @media (min-width: 300px and max-width:699px) so on… to fit all the 3 rules.

ps: it’s just an example, 300px is not what i use :stuck_out_tongue:

hope it helps :slight_smile:

6

Thanks - I will use the same hack on https://www.quemesa.com and https://m.quemesa.com until I have time to optomise the mobile app for the desktop

7

Thank you. It worked for me too.

8

In my case, to limit the width and center the body I used this:

html,
body {
  height: 100%;
  max-width: 1200px;
}

html {
  display: table;
  margin: auto;
}

body {
  display: table-cell;
  vertical-align: middle;
}
9

I just want to share this solution cause it took me some time to figure out…
The problem I had will all the other solution was that my popover was not in place.

@media (min-width: 500px) {
ion-app {
align-items: center;
}
.ion-page {
align-items: center;
}

ion-tabs {
inset: auto !important;
max-width: 500px;
}
}

my app router was structured in the following manner:



{/* Routes /}
{/ Tabs */}


;

10

None of the options listed worked for me.
Here is mine for Ionic 6.

@media (min-width: 500px) {
  ion-app { 
    position: relative;
    margin: auto;
    top: 0;
    bottom: 0; 
    max-width: 390px;
    max-height: 844px;
  }
  
  .input-col-web {
    // add this to any ion-columns
    margin: auto!important;
    flex: unset!important;
    width: unset!important;
    max-width: unset!important;
    min-width: 280px;
  }

  form.checkout {
    // Stripe elements
    max-width: 350px!important;
    max-height: 600px!important;
  }

  ion-modal > .ion-page {
    min-height: 700px;
  }

}