Issue with breakpoints when used with justify-center

[leoprada]

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:

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)

[genyded]

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>

[leoprada]

@genyded will try this. Thank you!