How to limit main container width on large screens without screwing up q-layout on mobile ?
mariaczi last edited by
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.
You can make your own class to replace
.layout-padding. This is the current source for
.layout-paddingas 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: