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

  • 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.

  • Admin

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

      @media only screen and (max-width $layout-small-max)
        padding 1.5rem .5rem
          padding 0 .5rem
      @media only screen and (min-width $layout-medium-min) and (max-width $layout-medium-max)
        padding 1.5rem 2rem
        margin auto
          padding 0 2rem
      @media only screen and (min-width $layout-big-min) and (max-width $layout-big-max)
        padding 2.5rem 3rem
        margin auto
          padding 0 3rem
      @media only screen and (min-width $layout-large-min)
        padding 3rem 4rem
        margin auto
          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'

Log in to reply