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="[$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>
@genyded will try this. Thank you!