Menggunakan width: 500px; membuat elemen tetap selebar 500px bahkan jika dibuka di layar smartphone yang hanya selebar 360px, sehingga memicu scrollbar horizontal yang merusak tampilan.
Solusinya adalah menggunakan max-width: 500px; width: 100%;. Elemen akan maksimal selebar 500px di laptop, namun otomatis mengecil menyesuaikan lebar layar ponsel!
<!DOCTYPE html>
<html>
<head>
<style>
.wadah-responsif {
max-width: 450px;
margin: auto;
background: #ffffff;
border: 2px solid #0d2e5c;
padding: 20px;
border-radius: 12px;
text-align: center;
}
</style>
</head>
<body style="background:#f1f5f9; padding:15px;">
<div class="wadah-responsif">
<h4 style="margin-top:0;">Wadah Responsif</h4>
<p>Coba perkecil jendela browser Anda: kotak ini tidak akan pernah meluber keluar layar!</p>
</div>
</body>
</html>Gunakan selalu max-width untuk kontainer utama, kartu, dan gambar.
Mengapa max-width lebih disukai daripada width statis untuk kontainer kartu website?