CSS visibility classes not working

[henrychoy]

What happened?

The CSS visibility classes listed here are not working? https://quasar.dev/style/visibility

I see both below on mobile. Am I using them wrong? The docs don't show an example.

    <div class="mobile-hide">mobile-hide</div>
    <div class="desktop-only">desktop-only</div>

I'm able to get the same effect this way, but still curious as to how I use the classes above?

import { useQuasar } from 'quasar'
const $q = useQuasar()
const mobile = computed(() => {return $q.screen.sm || $q.screen.xs  })

What did you expect to happen?

I'm expecting the classes "mobile-hide" or "desktop-only" to hide those divs

Reproduction URL

https://codepen.io/Henry-Choy-the-reactor/pen/eYodKav

How to reproduce?

Apply "mobile-hide" or "desktop-only" class to div. I was expecting them to be hidden on mobile screens.

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Plugins (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[Yusuf Kandemir]

The Screen plugin is affected by the screen size, whereas the platform-related visibility classes are, by the name, affected by the platform. So, either use an actual mobile phone or use the device simulation(don't select "responsive", select an actual phone) in dev tools.