Почему не работает адаптивная вёрстка на телефоне?

Question

Учусь писать сайты, узнал как делается адаптивная вёрстка, но на телефоне она не работает:

@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>

Что я делаю не так?

Answer 1

Расположение важно, сначала:

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

потом:

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

Рабочий пример на основе Вашего кода:

@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>

Так же проверьте, присутствует ли у Вас все необходимое для того что бы сам "адаптив" был возможен:

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

Answer 2

Попробуйте использовать Bootstrap ( если вы новичок и хотите делать адаптивность не заморачиваясь о медиа-запросах )

Мой совет @media (max-width: your width;){ width меньше чем задал в медиа }

БЛОГ НА HUSL

Почему не работает адаптивная вёрстка на телефоне?

Ответы (2 шт):