Cara Hilangkan Scroll Horizontal di Ponsel

Scroll horizontal di ponsel biasanya datang dari satu elemen yang melebihi lebar viewport. Di preview editor.clincoo.buzz sempitkan panel sampai lebar ponsel, lalu gulir ke samping untuk memastikan gejalanya nyata.

Cari yang melebar

Di konsol tempel document.querySelectorAll('*') lalu bandingkan scrollWidth dengan clientWidth. Elemen yang scrollWidth-nya lebih besar adalah tersangka. Sering kali itu gambar tanpa max-width, tabel, atau teks panjang tanpa spasi.

Batasi lebar

img, video, dan iframe perlu max-width: 100% dan height: auto. Kontainer grid atau flex yang tidak boleh menyusut perlu min-width: 0 pada anak. Padding besar ditambah width: 100% tanpa border-box juga mendorong halaman keluar.

Uji lagi sebelum deploy

Setelah perbaikan, scroll kiri-kanan harus hilang di lebar 360 piksel. Baru deploy dari app.clincoo.buzz. Jangan sembunyikan gejala dengan overflow-x: hidden di body sebelum penyebabnya ketemu.