html – Why doesn't responsive layout work on my phone?

Question:

I am learning to write websites, I learned how adaptive layout is done, but it does not work on the phone:

@media (min-width: 570px) {
  body {
    background-color: chocolate;
  }
  #content {
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 18%;
  }
  a {
    margin: auto;
    color: chartreuse;
    font-family: fantasy;
    font-size: 50px;
    text-decoration: none;
  }
}

@media (max-width: 569px) {
  body {
    background-color: chocolate;
  }
  #content {
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 35%;
  }
  a {
    margin: auto;
    color: chartreuse;
    font-family: fantasy;
    font-size: 60px;
    text-decoration: none;
  }
}
<div id="content">
  <a href="bi2/index.html">Би-2</a>
  <br>
  <a href="calc/index.html">Калькулятор</a>
  <br>
  <a href="pyatnashki/index.html">Пятнашки(взял с инета)</a>
</div>

What am I doing wrong?

Answer:

Location is important first:

@media (max-width: 569px) { ... }

Then:

@media (min-width: 570px) { ... }

Working example based on your code:

@media (max-width: 569px) {
  body {
    background-color: chocolate;
  }
  #content {
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 35%;
  }
  a {
    margin: auto;
    color: chartreuse;
    font-family: fantasy;
    font-size: 60px;
    text-decoration: none;
  }
}
@media (min-width: 570px) {
  body {
    background-color: red;
  }
  #content {
    text-align: center;
    width: 100%;
    height: 100%;  
    margin-top: 18%;
  }
  a {
    margin: auto;
    color: chartreuse;
    font-family: fantasy;
    font-size: 50px;
    text-decoration: none;
  }
}
<div id="content">
  <a href="bi2/index.html">Би-2</a>
  <br>
  <a href="calc/index.html">Калькулятор</a>
  <br>
  <a href="pyatnashki/index.html">Пятнашки(взял с инета)</a>
</div>

Also check if you have everything you need to make the "adaptive" possible:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 />
</head>
Post Views: 1
Scroll to Top