Issue with breakpoints when used with justify-center

  • Hi guys. I’m having this issue, i searched in the forum but didn’t find anything related.

    I am trying to use justify-center for small screens and justify-end for large screens. Reading the docs i found this:


    So I tried to use it as justify-sm-center and justify-lg-end but haven’t got to make it work like so. I made this fiddle for demonstrate it:

    I don’t really know if I am doing something wrong.

    (I know how to make it work by my own using CSS but I’d rather using the predefined quasar class, of course)

  • I don’t think the breakpoints work on rows (only items within rows), so I think to do what you want, you would have to use the Quasar Screen Plugin with Vue Class Bindings. Something like:

    <div class="row">
              <p>Class: justify-center</p>
              <div class="row col-12 bg-black"
                :class="[$ ? 'justify-left' : 'justify-center']">
                <div class="col-4 bg-blue q-py-md text-center">
                <div class="col-4 bg-green q-py-md text-center">

  • @genyded will try this. Thank you!

Log in to reply