#4. Адаптивная верстка сайта под Wordpress на Bootstrap 4 + Sass | Реальный заказ.

Получите PSD макет и все материалы к нему по ссылке:

Адаптивная верстка сайта - сегодня мы рассмотрим эту тему на практике. Вы узнаете как работать с медиа запросами.

Посмотрите полный плейлист верстки под Wordpress на Bootstrap 4 + Sass + Flexbox CSS с самого начала:

1:33 Как выглядит макет для мобильных устройств
2:37 Переходим к адаптиву сайта
3:42 В браузере открываем Developers Tool (f12) для проверки @media запросов
4:38 Проверяем @media запрос (как работают @media запросы?)
7:19 Исправляем url путь до иконок
7:36 Добавляем в верстку кнопку с иконкой "меню"
11:11 Делаем выпающее меню при нажатии на кпопку ".top-nav_btn"
14:42 Пишим скрипт для выпадющего меню
18:08 Делаем выпадающий сайдбар ("Категории")
24:35 Пишим скрипт для выпадающего сайдбара ("Категории")
25:38 Скриваем рандомные обьекты (.left-sidebar_object)
26:15 Настраиваем слайдер
28:21 Делаем футер адаптивным
30:25 Докручиваем адаптив
34:04 Пишим media запрос для 768px-991px

Ссылка на сайт Bootstrap 4:
Сервис для работы с макетами Avocode:
Справочник HTML/CSS на русском языке:
Документация Sass на русском
Документация Sass на анлглийском
Сервис для составления своих шрифтовых иконок
Крутой слайдер на jQuery - Slick Slider

Больше контента в нашей группе Вконтакте
Присоединяйтесь к нашему сообществу Discord

Мой канал в telegram "Лысый из браузера"

Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
-----------
Я использую хостинг Link Host с 2014 года

Каналы с крутыми фичами на CSS и JavaScript:

Канал с терминами для айтишников:

Канал, где публикуют ссылки на полезные сервисы и сайты:

[devSEO]

Очень понравилось. Все по-настоящему, как и во время настоящей верстки. Видно, что не для урока репетированное.
Пробуешь, нащупываешь решение и выполняешь. Здорово!

[mbnrltu]

Классные видео. Очень много полезного узнал. Смотрю подряд с самого утра, вникаю, потом пытаюсь повторить. Отлично объясняешь, всё понятно и наглядно+голос приятный, что тоже немаловажно

[Ratibor_Gradov]

Спасибо большое! Зачем картинки с левого сайтбара совсем за нонел)) я на больших оставил, в media скрыл.. А вообщем не устаю удивляться твое подачи материала, это круто бро!)

[dmytrozhytnik]

Так редко выходит, что забываю что было в прошлых видео...😞
Круто было бы хоть немного чаще😅

[vladimirrallo]

Нажатие реализовал так:
<script
<script>
$( document ).ready(function(){
$( ".top-nav_btn" ).click(function(){
$( ".top-nav_menu" ).slideToggle();
});
});
</script>

@media (max-width: 480px)
.top-nav
&_btn
display: block
&_menu
flex-direction: column
display: none
li
line-height: 2
a
&::after
display: none

[Ratibor_Gradov]

Направление деятельности и кнопку узнать больше о компании, с 768 до 992 я центрировал, мне кажется так лучше + сделал .btn-primary
margin-top: 20px, отступ от текста по больше))

[MsPhil]

Спасибо в очередной раз за урок, Артем! Подскажите, пожалуйста, как оставить псевдоэдлемент &::after на меньших мониторах? Чтобы не по три элемента меню подчеркивало, а один, как на десктопной версии? У меня почему-то по 3 подчеркивает.
Спасибо заранее за ответ!

[masterng]

Ультра полезное видео, просто тонна инфы. Спасибо большое

[ArtikMan]

И еще вопрос по адаптиву. В хроме, когда делаешь адаптив через браузерное приложение, там очень много мобильных устройств. Адаптив делать под каждое обязательно(это ппц гемор, + там очень старые смартфоны есть). Или можно например ориентироваться только на айфоны и этого будет достаточно? И еще, я не увидел адаптива на альбомный режим в смартфонах. Я о landscape

[victorkas]

slideToggle добавляет в html к блоку display:block \ display:none; Это видно в просмотре кода при клике на btn. Не знаю, дает ли это возможность не писать дополнительные стили для брейкпоинтов типа блок и нон, но без них отлично работает.
вот это вот menu.slideToggle( ); будет работать так же как

[alexlisouski]

не понял как подключить новую библиотеку jquery. её нужно скачать или переписать в коде название?

[followthewhiterabbit]

Подскажите, зачем задавать cursor: pointer "Категориям", если в мобильных телефонах нету курсора?

[rapincua]

На 1024 слайдер вылазит, поправить стоило бы, и col-md не до 768, а с 768 и до 992

[Omgyaroslav]

После настройки блока responsive на 28 минуте, исчезли все изображения со слайдера (как в полной версии, так и в мобильной). Кто-нибудь сталкивался?

[nosifle]

Быстро, понятно и познавательно. 10 из 10!
Спасибо)

[KRUTYATSYA-DENGI]

Что делать, если картинки в слайдере, перезаписываються строчкой style="width: 100%; display: inline-block;" вместо style="background-image: url(img/directions/3.png);"
Пробовал прописывать style="background-image: url(img/directions/3.png) !important;" не помогает, что делать?

[cwhsxft]

Ну не знаю... мне как-то показалось, что этот урок в отличии от других похуже... многое недоделано, типа нормально выезжающего меню и категорий, заказчик такое вообще нормально воспринял? И тот момент где вы прописали объектам дисплей нон в основных стилях, он будет исправлен позже или так и оставите?

[mylearn]

а можно адаптив делать классами бутсрапа?

[serh]

а если в шапке много блоков как их потом ровнять отображать жууть

[vladimirrallo]

Нужна помощь! Делаю всё точно по уроку, НО при уменьшении до 420px в инспекторе показывает, что у
@media (max-width: 480px)
.top-nav_btn
display: block; ЗАЧЁРКНУТ.
Появляется только при жёстком !important. С top-nav_manu та же проблема. Как исправить?
Использую GULP