Media queries don't work

HTML-CSS
1

Hello @all,

i’m building a coming soon webpage for me. But i have some issues, which i can’t solve without your help.

This is my HTML and CSS code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page name</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div id="wrapper">
      <div class="box">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <hr>
        <p class="domains">
          Lorem ipsum - Lorem ipsum - Lorem ipsum
        </p>
        <p class="impressum">
          Lorem ipsum
        </p>
        <p class="footer">CREDITS<br>
          Lorem ipsum
        </p>
      </div>
    </div>
  </body>
</html>

@font-face {
  font-family: 'Lemon-Milk';
  src: url('../fonts/lemon-milk.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

html, body {
  height:100%;
}

#wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #000;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/bg.jpg');
}

.box {
  color: #fff;
  width: 1860px;
  margin: auto;
  text-align: center;
}

p {
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
}

.domains {
  font-size: 14px;
  font-family: 'Lemon-Milk', sans-serif;
}

.impressum {
  font-size: 14px;
  padding-top: 20px;
}

em {
  color: #c6ff00;
}

a {
  color: #c6ff00;
  text-decoration: none;
}

hr {
  color: #fff;
  height: 1px;
  width: 1820px;
  border: none;
  margin: 20px auto;
  background-color: #fff;
}

.footer {
  font-size: 12px;
  padding-top: 20px;
}

@media (max-width: 480px) {
  #wrapper {
    background-image: url('../img/bg-480px.jpg');
  }

  .box {
    color: #fff;
    width: 460px;
    margin: auto;
    text-align: center;
  }

  p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
  }

  .domains {
    font-size: 12px;
    font-family: 'Lemon-Milk', sans-serif;
  }

  .impressum {
    font-size: 12px;
    padding-top: 20px;
  }

  hr {
    width: 400px;
  }

  .footer {
    font-size: 10px;
    padding-top: 20px;
  }
}

@media (max-width: 800px) {
  #wrapper {
    background-image: url('../img/bg-800px.jpg');
  }

  p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
  }

  .domains {
    font-size: 12px;
    font-family: 'Lemon-Milk', sans-serif;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  hr {
    width: 760px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

@media (max-width: 1024px) {
  #wrapper {
  background-image: url('../img/bg-1024px.jpg');
  }

  .box {
    width: 1004px;
  }

  p {
    font-size: 16px;
  }

  .domains {
    font-size: 12px;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  hr {
    width: 990px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

@media (max-width: 1280px) {
  #wrapper {
  background-image: url('../img/bg-1280px.jpg');
  }

  .box {
    width: 1260px;
  }

  p {
    font-size: 16px;
  }

  .domains {
    font-size: 12px;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  hr {
    width: 1200px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

@media (max-width: 1600px) {
  #wrapper {
  background-image: url('../img/bg-1600px.jpg');
  }

  .box {
    width: 1500px;
  }

  p {
    font-size: 16px;
  }

  .domains {
    font-size: 12px;
  }

  .impressum {
    font-size: 14px;
    padding-top: 20px;
  }

  hr {
    width: 1480px;
  }

  .footer {
    font-size: 12px;
    padding-top: 20px;
  }
}

When i open my website on a computer screen, there is no problem. My resolution is 1920x1080 pixels. But on my smartphone with a portrait resolution of only 1080 pixels, the flexbox won’t fit into the width of 1080 pixels. Instead the flexbox is stuck on 1920 pixels width and doesn’t scale down to the necessary resolution/width of 1080 pixels.

Please help me. I’m pretty new to html and css and i don’t know where my error is.

Thank you very much!

2

this one is a valid query for a width of 1080, and as you put it at the bottom of all css, it’s the one applied

you need to consider the cascading aspect of CSS when ordering the media query