CODEWITHSUNDEEP
cssmedia
user305266
user305266

Reputation: 11

@media Not working

I've read a lot of "@media not working" questions on here. Unfortunately, most of them seem to be unanswered - or the answers don't solve the problem. Keeping my fingers crossed that doesn't happen this time!

This is my code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (min-width: 801px) {
.smallmobile {
 display: hidden !important;
 }
.mobileonly, .bigmobile {
 display: hidden !important;
 }
}
@media screen and (max-width: 800px) {
 font-family: Roboto, Noto, sans-serif;
.notformobile {
 display: hidden;
 }
}
@media screen and (min-width: 480px) and (max-width: 800px) {
 /* Target landscape smartphones, portrait tablets, narrow desktops */
 .smallmobile {
 display: hidden;
 }
}
@media screen and (max-width: 479px) {
 /* Target portrait smartphones */
 .bigmobile {
 display: hidden;
 }
}
</style>
</head>
<body>
Everyone can see this<br /><br />
There should be nothing below this line except on small mobiles:<br />
<span class="smallmobile"><a href="tel:+441234456789">Phone us on 01234 456789 to discuss your requirements</a></span><br /><br />
<div class="smallmobile"><a href="tel:+441234456789">Phone us on 01234 456789 to discuss your requirements</a></div><br /><br />
<a class="smallmobile" href="tel:+441234456789">Phone us on 01234 456789 to discuss your requirements</a>
</body>
</html>

I think it's fairly obvious what is/is not supposed to happen.

Why isn't it working?

[I've tried it on Chrome and Firefox. It doesn't work on either.]

Upvotes: 0

Views: 568

Answers (2)

oqx
oqx

Reputation: 2377

@media screen and (min-width: 801px) {
.smallmobile {
 display: none !important;
 }
.mobileonly, .bigmobile {
 display: none !important;
 }
}
@media screen and (max-width: 800px) {
 font-family: Roboto, Noto, sans-serif;
.notformobile {
 display: none ;
 }
}
@media screen and (min-width: 480px) and (max-width: 800px) {
 /* Target landscape smartphones, portrait tablets, narrow desktops */
 .smallmobile {
 display: none ;
 }
}
@media screen and (max-width: 479px) {
 /* Target portrait smartphones */
 .bigmobile {
 display: none;
 }
}
Everyone can see this<br /><br />
There should be nothing below this line except on small mobiles:<br />
<span class="smallmobile"><a href="tel:+441234456789">Phone us on 01234 456789 to discuss your requirements</a></span><br /><br />
<div class="smallmobile"><a href="tel:+441234456789">Phone us on 01234 456789 to discuss your requirements</a></div><br /><br />
<a class="smallmobile" href="tel:+441234456789">Phone us on 01234 456789 to discuss your requirements</a>

it is not supported with every browsers yet see can i use.

and the display hidden is not right use none

Upvotes: 0

m0meni
m0meni

Reputation: 16445

For every screen width you have display: hidden meaning if it worked you wouldn't see anything for any width. Moreover, display: hidden is an invalid CSS rule. It should be display: none.

To fix it make the first rule

@media screen and (min-width: 801px) {
.smallmobile {
 display: none !important;
 }
}

and the second

@media screen and (min-width: 480px) and (max-width: 800px) {
 /* Target landscape smartphones, portrait tablets, narrow desktops */
 .smallmobile {
   display: block;
 }
}

Upvotes: 1

Related Questions