How can I hide a column

[maxant]

I’m using CSS to layout rows and columns and I would like to hide a column when the browser is very thin (XS).

<div class=”row” style="width: 100%; border: 5px solid red;">
    <div class="row">
        <div class="col-md-3 col-xs-hidden" style="border: 5px solid red;">menu</div>
        <div class="col-md-2 col-xs-12" style="border: 5px solid red;">1</div>
        <div class="col-md-2 col-xs-12" style="border: 5px solid red;">2</div>
        <div class="col-md-2 col-xs-12" style="border: 5px solid red;">3</div>
        <div class="col-md-3 col-xs-12" style="border: 5px solid red;">context</div>
    </div>
</div>

The column with content “menu” should be hidden when the screen is small. I tried “col-xs-hidden” but that doesn’t exist in the imported css file. I guess I could add my own, but if something already exists, I’d rather use that.

[metalsadman]

@maxant use $q.screen https://v1.quasar-framework.org/options/screen-plugin.
like so:

<div :class="`col-md-3 ${$q.screen.xs ? 'hidden': ''}`" style="border: 5px solid red;">menu</div>

[maxant]

@metalsadman perfect, thanks!

[lucasfernog]

There is also https://v1.quasar-framework.org/style/visibility#Window-Width-Related

Which is simplier

[danbars]

Link has changed: https://quasar.dev/style/visibility#Window-Width-Related

basically lt- and gt- prefixes allow visibility on resolutions less than or greater than what is defined. E.g. lt-lg will be displayed on xs, sm and md