Changing the default breakpoints

[tonyskulk]

Re: Layout breakpoints (media queries)

I have seen this old thread about changing the breakpoints. According to the current quasar version. How is it done?

In my app in my main layout there is a header designed like this:

<q-header class="gt-xs">

And a footer like this:

<q-footer class="xs">

This works fine, but I tried to set the breaking point to a custom px size. So I added this into my /css/app.sass:

$breakpoint-xs : 768px

Unfortunately nothing changes and the default breakpoints seem to be untouched. Do I have to do anything more?

[s.molinari]

https://quasar.dev/style/sass-scss-variables#Customizing

You need to put your breakpoint overrides in src/css/quasar.variables.sass.

Scott

[tonyskulk]

Thanks, it worked.