CSS to show/hide Elements on a webpage

I’m trying to use CSS with @media to hide a div from displaying on mobile devices but its not working… I probably have a minor glitch somewhere. I’ve wrapped the element I don’t want to show in a div tag with a class=“mobileContent”. On the style.css sheet I’ve attached to the page, I’ve added these lines:

I’ve placed this meta-tag in the header:

But the div (the “TextSize tool” in the footer) still displays on my cell phone. See https://statecollegedev.com/gettinon/template_pages.html as an example. I know the style sheet works since if I change the CSS, it does affect the div. Any guidance is appreciated.

whoops!!! just noticed this message! sorry , these are usually green.
unless its post and I have misread it.
I will see now, after I reply …lets see where it appears…

Yep it was a post, not a message. my bad :slight_smile:


I think, meanwhile,- you have found the reason :slight_smile:

This is what I see now in your “style.css”:
@media screen and (min-width: 0px) and (max-width: 720px)