Есть инпут:
<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.... Заметил что некоторые селекторы подвергаются адаптивности а другие нет. Почему так? Может адаптивность делается другим способом?
Средний
