Rozdział 5 · Zadanie 2

Media query — jeden przykład

Reguła CSS, która działa tylko na wąskich ekranach.

Zadanie

Dodaj na koniec swojego style.css:

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

  h1 {
    font-size: 28px;
  }
}
Jak to czytać

@media (max-width: 600px) { ... } — «zastosuj wszystko w środku, tylko jeśli szerokość ekranu wynosi 600 pikseli lub mniej» (czyli na telefonie, nie na komputerze).

flex-direction: column; — karty z Flexboxa (Rozdział 2, lekcja 11), które wcześniej stały w rzędzie, teraz układają się w kolumnę jedna pod drugą.

Spróbuj

Zmniejsz okno przeglądarki do szerokości mniejszej niż 600px (albo otwórz na telefonie) — karty przebudują się w kolumnę, a nagłówek zrobi się mniejszy.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska