Cannot view media queries on desktop, but able to see it when inspecting the page-CodePudding

Was following a tutorial about media queries. When I open the HTML in Chrome/Firefox, I get a blank page and nothing displays. When I inspect the page though, the code displays normally and I can see how the media queries work. I tried adjusting the min-width and max-width of the media queries but I still get a blank page in any browser I use. I have posted the original HTML below from the tutorial.

<!DOCTYPE html>
<html>
    <head>
        <title>Beginners CSS - Chapter 8</title>


<style type="text/css">

* {margin: 0px;}

main {
  margin: 10px auto; width: 600px; padding: 30px;  margin-top: 0px; 
  background-color: olive; display: block;
}





@media screen and (max-width: 350px) {
  main {
    background-color: #88A5E0;
  }
}

@media screen and (min-width: 600px) {
  main {
    background-color: red;
  }
}

@media screen and (min-width: 800px) {
  main {
    background-image: url("images/Reeds-in-Wind-Cinemagraph.gif");
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 400px;
  }
}

@media screen and (min-width: 1000px) {
  main {
    background-image: none;
    background-color: #FFF;
  }

  h1, p {display: none;}
}







</style>
    
</head>
<body>

  <main>

    <h1>Media Queries</h1>
    <p>
      Media allows you to make your pages to change to fit any device.
    </p>

  </main>

</body>
</html>

CodePudding user response：

The screen width changes when the developer tool is opened on the right/left dock. So, the elements that you saw perhaps are from the min-width 800px media query.

The page when the minimum width is 1000 pixels is not "blank page and nothing displays". You can read from the code below, you're setting the background-color to white, hiding the h1 & p and removing the background-image when the min-width: 1000px.

@media screen and (min-width: 1000px) {
  main {
    background-image: none;
    background-color: #fff;
  }

  h1,
  p {
    display: none;
  }
}

CodePudding user response：

The page is not blank, according to your code for screens with width more than 1000px you set this styles:

@media screen and (min-width: 1000px) {
  main {
    background-image: none;
    background-color: #FFF;
  }

  h1, p {display: none;}
}

so the h1 and p1 element will not be displayed and the background will be white, if you resize the window other media queries happen. Also by Opening your developer tools you are resizing your window.