CODEWITHSUNDEEP
htmlcssmobile
Peter Friedlander
Peter Friedlander

Reputation: 49

@media screen is not working, whats wrong?

I have the following code, which I am getting from a tutorial. When I run on Chrome, or Firefox, all the two lines are displaying no matter if I resize the window or not. What am I doing wrong?

<html>
<head>
    <style>

#content-desktop {display: block;}
#content-mobile {display: none;}

@media screen and (max-width: 768px) {

#content-desktop {display: none;}
#content-mobile {display: block;}

</style>

<meta charset="UTF-8">
<title>Untitled Document</title>
</head>


<div class="content-desktop">
This is the content that will display on DESKTOPS.
</div>

<div class="content-mobile">
This is the content that will display on MOBILE DEVICES.
</div>
<body>
</body>
</html>

Upvotes: 0

Views: 75

Answers (3)

Hadi Pawar
Hadi Pawar

Reputation: 1126

You never closed the brackets, you're using # to target class you need to use . also you're div's were outside the body tag. Further more you need to have a query for the above scaling as well in this case. the following code is tested. you can run it directly.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.desktop {
  background-color: yellow;
  padding: 20px;
}

@media screen and (max-width: 600px) {
  .desktop {
    display: none;
  }
  .mobile{
      background-color: red;
  padding: 20px;
}
}
@media screen and (min-width: 600px){
    .mobile{
        display: none;
    }
}
</style>
</head>
<body>

<h2>Hide elements on different screen sizes</h2>

<div class="desktop">Show on desktop but hide on mobile.</div>
<div class="mobile">Show on Mobile but hide on desktop</div>


</body>
</html>

Upvotes: 0

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 1128

First, you're using class="content-desktop" and class="content-mobile" and your CSS is expecting id because you used #content-desktop and #content-mobile.

Secondly, you forgot to close your bracket.

In CSS, you need to use the dot . to select class and # to select id.

Try this :

.content-desktop {display: block;}
.content-mobile {display: none;}

@media screen and (max-width: 768px) {
   .content-desktop {display: none;}
   .content-mobile {display: block;}
}

Upvotes: 1

tao
tao

Reputation: 90048

You're never closing the bracket opened here:

@media screen and (max-width: 768px) {

Therefore, the entire @media rule is dropped by the parser. Simply close it where it should be closed (probably before </style>).

Upvotes: 0

Related Questions