Проект "Україна незламна!": адаптивність для малих розмірів екранів

Останній етап  верстки проекту: адаптація веб-сторінки до малих розмірів екранів. На сьогоднішній день макет веб-сайту повинен адаптуватися не тільки до комп'ютерів, але і до планшетів, мобільних пристроїв і навіть телевізорів, про це детально було описано в публікації "Медіа-запити" 

 Макет проекту "Україна незламна!"  не є складним, тому  в адаптації можна обмежитись розміром екрану 768рх, тобто на розмірах менше 768рх блоки веб-сторінки повинні будуть перебудовуватись з горизонтального розміщення у колонку і змінювати розміри.

Для шапки сайту, яка містить фонове зображення і саму назву проекту, на екранах розміром менше 768рх досить буде досит зменшити розмір шрифта заголовку та  прибрати нижній зовнішній відступ у блоці  .header_title

Налаштування розмірів  заголовків, відтупів для  параграфів, заголовків потрібно також  виконати і у блоках .dark-text, .light-container, .text-container  і зменшити внутрішні відступи для зображень:

У наступному блоці .light потрібно адаптувати  галерею зображень, які рзміщені у дві  колонки на розмірах екранів більше 768рх, коли розмір екрана буде менше 768рх, зображення повинні перелаштуватись в одну колонку і зайняти  всю доступну ширину еркану.

Зображення  галереї були розміщені у блоках .galery-item і мали базову ширину 35% на великих екранах, завдячуючи тому, що  це є флекс-елементи, у медіа-запиті можна змінити тільки  для блоків базову ширину .galery-item { flex-basis: 100%;}, а також зменшити внутрішні відступи padding  у блоці .light

Після адаптації  вигляд буде такий

Адаптації потребує блок .light-card, адже у цьому блоці в шаховому порядку розміщені картки з фото і описовою частиною. 

Тому проста перебудова  цих флекс-елементів у одну колонку на розмірах екранів менеше 768рх, заданими у медіа-запиті властивостями:

.light-card {
flex-direction: column;
flex-flow: wrap;
}

 не вирішить проблему, щоб  описова частина блоку  .text-container до фото на малих екранах слідувала  після кожного фото, особливо це актуально для  4 карток: 3, 4, 7, 8.

Тому тут потрібно застосувати примусову зміну порядку слідування блоків у потоці веб-сторінки за допомогою властивості order, вказавши  порядковий номер слідування блоку.  

Щоб звернутись  саме до 3, 4, 7, 8 флекс-елементу у блоці-контейнері варто застосувати властивість :nth-of-type, псевдоклас :nth-of-type використовується для додавання стилю до елементів зазначеного типу на основі нумерації у дереві елементів. 

Медіа-запит для блоку  .light-card буде виглядати так:

На  малих екранах  після  виконання  даного медіа-запиту, вигляд карток буде такий:

Наступним потребує адаптації блок .container_slider_css з  слайдером зображень, тут потрібно на малих екранах  відкорегувати  ширину зображень у слайдері і висоту, а також прибрати верхній та нижній  зовнішній відступи:

Залишається  ще у підвалі скорегувати поведінку флекс-елементів .col-3 у флекс-контейнері .dark-container, ці флекс-елементи  на розмфрах екранів менше 768рх повинні мати ширину  100% і відповідно потрібно зменшити внутрішні відступи:

Адаптований підвал на малих екранах буде мати вигляд: