Using custom screen breakpoints for visibility of element is not working

[tlarrain]

I'm using a custom screen size to hide things on small phones (e.g. max 320px width). The screen name is sm-phone and I'm putting the class sm-phone:hidden in the div I want to get rid of for that screen size.

The thing is that it doesn't appear on bigger screens either. When I change to an sm size, it appears again (I have a whole different set of classes for that case), and when I shrink the screen of the browser, it behaves as it should. In other words, I have to move to a different breakpoint and then back to see the custom screen working.

Any help would be very much appreciated. Thanks!

[simonswiss]

Hey @tlarrain 👋

Would you be able to recreate a simple example of your custom screen size on a https://play.tailwindcss.com example? I just want to make sure I understand what you mean exactly, and having an example would make that bit much easier 😅

Thanks!

[tlarrain]

Hi @simonswiss,

Thanks for your answer! Using the playground realized that something in Ionic was causing the problem. I changed the ion-img for just and img and it worked. The playground made me do that change in order to reproduce the problem, and thanks to that I found the solution.

[BerryStreet]

Demo of the responsive display classes in Bootstrap 4 Showing elements is not that easy with CSS since you need to know if the range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.

Official Website