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 - https://www.ingbank.pl/_fileserver/time20160614112151/item/1112977

    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:

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

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.