Latihan 2: Media Queries — CSS
Latihan 2 dari materi Media Queries di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Bikin dua kolom ini menyatu jadi satu kolom di layar sempit:
- Biarkan aturan
.container yang lama (display: grid dengan dua kolom 1fr 1fr) tetap di luar query, biar layar lebar tetap dua kolom.
- Di bawahnya, tulis
@media (max-width: 768px) { }
- Di dalamnya, tulis aturan
.container berisi grid-template-columns: 1fr;.
1fr sendirian artinya cuma ada satu kolom, selebar grid-nya.
Hint
- Aturan di dalam media query cuma berlaku saat syaratnya terpenuhi, jadi aturan dua kolom yang lama tetap dibutuhkan di luar buat layar lebar.
- Satu kolom berarti daftar lebar kolomnya cuma berisi satu nilai. Di dalam @media (max-width: 768px), sebut lagi selector .container.
- @media (max-width: 768px) { .container { grid-template-columns: 1fr; } }
