CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
joler-botol
joler-botol

Reputation: 452

Media queries not working despite simple use

I have a very simple media query. However, it is not working. Here's the code:

<!DOCTYPE html>

<html>

<head>
  <meta content="width=device-width, initial-scale=1" name="viewport" />

  <style>
    #landscape-div {
      display: none;
    }

    @media (min-width: 800px) {
      #landscape-div {
        display: block;
      }
    }
    
  
  </style>
</head>

<body>
  <div id="landscape-div">fsfsfsfsfsdd</div>
</body>

</html>

Expected result: the div should show up only when the minimum width is more than 800px.

However, it is showing up all the time. Why is this happening?

Edit: Edited the code as suggested by answers. Still not working.

Upvotes: 0

Views: 55

Answers (2)

Gangadhar Gandi
Gangadhar Gandi

Reputation: 2252

Your media query has been overridden. The best practice is to write media queries at the end of all styles

Update your styles like below:

#landscape-div {
  display: none;
}

@media (min-width: 800px) {
  #landscape-div {
    display: block;
  }
}

Upvotes: 1

Run_Script
Run_Script

Reputation: 2548

You are referring to an id using a . in your CSS. However, this will only work for classes. To refer to an id, you need to use the # symbol instead.

Edit: this was a typo in the original question and has now been fixed.

The media query will have to come first to make sure the other statement does not override it, because statements that come later in a CSS document will be chosen as most relevant by the browser.

<!DOCTYPE html>

<html>

<head>
  <meta content="width=device-width, initial-scale=1" name="viewport" />

  <style>

    #landscape-div {
      display: none;
    }

    @media (min-width: 800px) {
      #landscape-div {
        display: block;
      }
    }
    
  </style>
</head>

<body>
  <div id="landscape-div">fsfsfsfsfsdd</div>
</body>

</html>

View the code snippet above in full screen (by clicking 'expand snippet') to see that it is working.

Upvotes: 2

Related Questions