Menu
I am trying to hide a media query from being printed, so I came up with @media not print and (min-width:732px). But for whatever reason, this (and many variations I have tried) does not display as I would expect in browsers.
The only option I can think of is to use @media screen and (max-width:732px), but I would like to avoid this as it excludes all the other media types besides screen.
217
For the purpose of hiding elements with media queries you simply have to set their display to none inside the specific media query.
To override a specific media query rule, append a new css rule after the one you want to override. For example, if the last css rule does not have a media query attached, it will override all previously declared media queries (presuming the same selectors).
Media Query Not Working on Mobile Devices If media queries work on desktop and not on mobile devices, then you most likely haven't set the viewport and default zoom. Note: You only need to add one of the code lines above, and usually, the first one does the job.
A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the "Applies to" line), and all expressions in the media query are true.
Media queries grammar is pretty limited to say the least.
But with CSS3 (not CSS2.1) it seems that you can nest @media rules.
@media not print { @media (min-width:732px) { ... } } This basically executes as (not print) and (min-width:732px).
See https://stackoverflow.com/a/11747166/3291457 for more info.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
