Latihan 1: Media Queries — CSS
Latihan 1 dari materi Media Queries di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Tiga kotak di .container sekarang berjajar ke samping karena display: flex. Bikin mereka numpuk ke bawah di layar sempit:
- Di bawah aturan yang sudah ada, tulis media query
@media (max-width: 768px) { }
- Di dalamnya, tulis aturan
.container berisi flex-direction: column;
Biarkan .container { display: flex; gap: 16px; } yang lama tetap di luar query.
Hint
- Aturan khusus layar sempit ditulis di dalam blok @media, dan cuma berlaku kalau lebar layarnya 768px atau kurang.
- Pakai @media (max-width: 768px). Di dalamnya, sebut lagi selector .container, lalu ubah flex-direction jadi column.
- @media (max-width: 768px) { .container { flex-direction: column; } }
