Vuetify visibility class not working properly-CodePudding

Following the docs here, I am trying to use a Vuetify visibility class to hide an element on small screens.

Using the following class produces the opposite of what I want removing the element on the larger screen size and adding it to the small one.

 <span >
   {{ username }}               
 </span>

I have tried changing the classes to this:

 <span >
  {{ username }}               
 </span>

However, this has the same effect - the element appears only on the small screen.

If anyone has any idea why these classes are not working as expected I would appreciate the help.

CodePudding user response：

You should add a default display, in your case it should be d-none instead of d-sm-none.

<span >
    {{ username }}               
</span>

This element will be hidden on small screens and flex on medium screen devices.

CodePudding user response：

Set a the default display to none, and the other device screens to block.

<span >
    {{ username }}               
</span>