'@media query not working with 2 display: none; tags

I created a website and I used 2 divs, 1 has all the code for the desktop layout and one has all the code for mobile, I did this and would like to keep it this way for future changes,

On both divs display is default and on the media queries I have it set as this:

/* DESKTOP AND MOBILE VEIWPORT TOGGLE */

@media screen and (max-width: 1024px) {
  .desktop {
    display: none;
  }

  @media screen and (max-width: 100vw) {
    .mobile {
      display: none;
    }
  }
}

HTML

<div class="desktop">
    <p>desktop</p>
</div>

<--- MOBILE DIV --->

<div class="mobile">
    <p>mobile</p>
</div>

Also, all of my code can be found here with the html https://codesandbox.io/s/soph2?file=/css/index.css:244-451

Also sorry if this was a stupid question, I'm 13 and I've only been coding for a year now.

When I go to a mobile device, the desktop view does not show but neither does any of my mobile code, please help me, thank you very much!

Also, I just noticed when on the desktop mode, the mobile div shows up too for some reason under the footer.

htmlcssweb


Solution 1:[1]

Add this in the head section :

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


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

      @media screen and (min-width: 1024px) {
        .mobile {
          display: none;
        }
        .desktop {
          display: block;
        }
      }
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>
<body>
<div class="desktop">
  <p>desktop</p>
</div>



<div class="mobile">

  <p>mobile</p>
</div>
</body>
</html>

Solution 2:[2]

Media queries never go in media queries. Each one is basically a separate bit of css for a specific screen. In addition, 100vw should never be used in media queries, since it will always match. Also, please try to properly format your code. Makes it much more readable

@media screen and (max-width: 400px) {
  .mobile {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .desktop {
    display: none;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions