Как перенести форму поиска и входа для мобильных устройств?

Добрый день, в уроках об адаптивной верстке говорилось, что можно форму поиска и входа не скрывать, а например вынести вверху, сразу после хедера. Я что-то не совсем понимаю как это сделать?

html

css

3 ответов

В bootstrap курсе это показывается и реализовывается. Bootstrap проще, чем чистый html/css и делается это присвоением к поиску названием двух классов.

Смотри @media запросы тему адаптивной верстки. Чтобы поиск скрыть для экранов больше 600px, нужно написать, если блок с поиском с классом my_search, что-то типа такого:

@media only screen and (min-width: 600px)  {
    .my_search {
       display: none;
    }
}

И чтобы показывать этот поиск на экранах меньше 600px, можно написать примерно так;

@media only screen and (max-width: 600px)  {
    .my_search {
         display: unset;
    }
}

В первом случае скрывается свойством display:none поиск для экранов больше 600px, во втором случаете, когда экран меньше 600px показывается блок поиска. Это пример, могут быть и другие параметры, экраны и так далее, но думаю, что суть понятна как это делается.

Здесь про адаптивную верстку и media query есть в курсе HTML раздел:

https://fructcode.com/ru/courses/html-and-css/responsive-tag-viewport/

Посмотрел курс bootstrap, действительно там все проще, но хочется это уметь так же и без фреймворка сделать