@75db77

Почему не получается сделать сайт адаптивным? Может адаптивность делается не так?

Есть инпут:
<input type="text" class="searchInput" />
В сss ширина 300px инпута.
И header с span где есть названия
<div className="header">
                       <span>О нас</span>
                        <span>Телефон</span>
                        <span>На главную</span>
              </div>

Хочу сделать сайт адаптивным под различные устройства, пишу:
@media screen and (max-width: 1000px) {
  .header span {
      display: none;
   }
    .searchInput{
   width: 100px;
 }
}


Cмотрю в браузере как выглядит сайт на смартфоне. span пропали все из hedear. Отлично. Но инпут не уменьшился до 100px.... Заметил что некоторые селекторы подвергаются адаптивности а другие нет. Почему так? Может адаптивность делается другим способом?
  • Вопрос задан
  • 504 просмотра
Пригласить эксперта
Ответы на вопрос 2
@flokiowl
HTML-верстальщик
А у вас есть в head такой мета тег?
<meta name="viewport" content="width=device-width, initial-scale=1">


Возможно, первоначальные стили элемента имеют больший вес, и у Вас не получается переопределить их.
Пишите media запросы в конце документа.

Про вес
Ответ написан
Комментировать
@VeryLongAgoDid
Всё возможно
max-width
порой творит чудеса
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы