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:

    0_1536987262017_imagen.png

    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:

    https://jsfiddle.net/leoprada/3b40vn6g/

    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="[$q.screen.gt.md ? 'justify-left' : 'justify-center']">
                <div class="col-4 bg-blue q-py-md text-center">
                  Col-4
                </div>
                <div class="col-4 bg-green q-py-md text-center">
                  Col-4
                </div>
              </div>
            </div>