How to limit main container width on large screens without screwing up q-layout on mobile ?

[mariaczi]

Hi,

I need to limit the width of main container (so everything, including top nav, footer etc).
As I know, Q-layout has a lot of tweaks to work nice across all range of devices/resolutions and I do not want to screw it up.

This is the app which inspires me -

On resolutions over 1280 it limits the width of main container to 1170 and the app looks really nice even on large screens which is my current issue at the moment.
I am building app where the target user has to get as simple as possible app so on single page I have not too much content/interactions which make it looking bad on large screens even if it looks quite nice on phone/tablet resolution.

@rstoenescu - how can I make it with Quasar ? I know I can easily assign container width but want to be sure it won’t screw up all work which you have done.

[rstoenescu]

You can make your own class to replace .layout-padding. This is the current source for .layout-padding as a starting point for you:

.layout-padding
  @media only screen and (max-width $layout-small-max)
    padding 1.5rem .5rem
    &.horizontal
      padding 0 .5rem
  @media only screen and (min-width $layout-medium-min) and (max-width $layout-medium-max)
    padding 1.5rem 2rem
    margin auto
    &.horizontal
      padding 0 2rem
  @media only screen and (min-width $layout-big-min) and (max-width $layout-big-max)
    padding 2.5rem 3rem
    margin auto
    &.horizontal
      padding 0 3rem
  @media only screen and (min-width $layout-large-min)
    padding 3rem 4rem
    margin auto
    &.horizontal
      padding 0 4rem

In order for you to get access to $layout-* Stylus variables from Quasar, include this in your app <style> tag before it:

@require '~quasar-framework/src/themes/core/size.variables.styl'