Розділ 5 · Завдання 2

Media query — один приклад

Правило CSS, яке діє тільки на вузьких екранах.

Завдання

Додай в кінець свого style.css:

style.css

@media (max-width: 600px) {
  .row {
    flex-direction: column;
  }

  h1 {
    font-size: 28px;
  }
}

Як це читати

@media (max-width: 600px) { ... } — «застосуй усе, що всередині, тільки якщо ширина екрана 600 пікселів або менше» (тобто на телефоні, а не на комп’ютері).

flex-direction: column; — картки з Flexbox (Розділ 2, урок 11), які раніше стояли в ряд, тепер складаються в стовпчик одна під одною — так вони не тиснуться на вузькому екрані.

Спробуй

Зменш вікно браузера до ширини менше 600px (або відкрий на телефоні) — картки перебудуються в колонку, а заголовок стане меншим.

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща