Laporannya masuk lewat chat: "footer-nya kepotong di HP". Saya buka situsnya di ponsel dan memang benar. Halaman bisa di-scroll ke samping, muncul scrollbar horizontal, konten footer terpotong di tepi kanan, dan satu kolom terdorong sampai keluar layar. Saya cek di desktop: sempurna. Empat kolom footer berbaris rapi, tidak ada satu piksel pun yang aneh. Situs ini dibangun bertahun-tahun lalu dengan Elementor, jauh sebelum saya pegang, jadi saya tahu saya akan berhadapan dengan lapisan keputusan lama.
Bug yang cuma muncul di mobile sementara desktop rapi hampir selalu berarti satu hal: ada nilai yang di-tuning untuk desktop dan ikut terbawa turun ke layar kecil. Pertanyaannya tinggal nilai yang mana.
Investigasi
Langkah pertama saya standar untuk semua overflow horizontal: buktikan dulu bahwa overflow-nya nyata, lalu cari elemen pelakunya. Di DevTools device mode, saya bandingkan lebar dokumen dengan lebar viewport:
document.documentElement.scrollWidth;
document.documentElement.clientWidth;Di viewport 360px, scrollWidth balik 511. Ada 151 piksel ekstra yang tidak seharusnya ada. Angka sespesifik itu jarang kebetulan, jadi saya jalankan walk sederhana untuk menemukan elemen yang lebarnya melewati viewport:
const limit = document.documentElement.clientWidth;
for (const el of document.querySelectorAll('*')) {
if (el.getBoundingClientRect().right > limit) {
console.log(el, Math.round(el.getBoundingClientRect().right));
}
}Jejaknya berhenti di satu kolom footer. Di panel computed styles: margin-left: 151px. Di layar 360px. Kolom itu sendiri lebarnya persentase, tapi margin kirinya piksel mati, dan 151px itu hampir setengah lebar layar HP.
Akar masalah
Saya buka pengaturan elemennya di Elementor, dan di sana tersimpan warisan lama: margin kolom yang di-set bertahun-tahun lalu, kira-kira seperti ini di data elemennya:
{
"elType": "column",
"settings": {
"_column_size": 25,
"margin": {
"unit": "px",
"top": "0",
"right": "0",
"bottom": "0",
"left": "151",
"isLinked": false
}
}
}Seseorang, dulu, menggeser kolom itu ke posisinya pakai margin, bukan pakai layout. Di desktop hasilnya kelihatan benar, jadi tidak ada yang protes. Masalahnya: margin piksel itu tidak responsif. Elementor menurunkan nilai desktop ke tablet dan mobile secara diam-diam kecuali ada override eksplisit per breakpoint. Tidak ada peringatan, tidak ada tanda seru. Margin kiri 151px yang sama berlaku persis di ponsel 360px.
Lalu ada faktor kedua yang memperparah: section-nya pakai content_width: boxed dan lebar kolomnya persentase. Persentase dihitung dari container, tapi margin piksel ditambahkan di atasnya. Total lebar kolom, persen ditambah margin tetap, melewati 100vw di layar kecil. Desktop punya ruang untuk menyerap 151px itu; layar 360px tidak.
Jadi bukan satu bug, tapi tumpukan keputusan legacy: positioning pakai margin, nilai desktop yang cascade tanpa override, dan boxed width yang membuat hitungannya meledak justru di layar paling sempit.
Perbaikan
Yang pertama saya pasang adalah guard CSS sementara, supaya pengunjung berhenti melihat footer rusak selagi saya membersihkan pengaturannya:
@media (max-width: 767px) {
.footer-column {
margin-left: 0 !important;
width: 100% !important;
}
}Lalu perbaikan yang sebenarnya, di pengaturan Elementor-nya:
Satu, audit semua kolom footer untuk margin piksel. Bisa lewat DevTools, bisa lewat data elemennya langsung. Setiap margin px di kolom itu tersangka.
Dua, hapus margin positional-nya. Kolom yang tadinya digeser 151px pakai margin saya kembalikan ke posisinya pakai layout yang benar: column gap dan justify di level section. Untuk margin yang memang punya alasan desain, saya set nilainya per breakpoint, dan di mobile nilainya nol.
Tiga, paksa kolom untuk stack di mobile dengan lebar 100%, dan bereskan perilaku boxed width-nya: boxed_width jadi 100% di mobile, atau section-nya diganti ke full width dengan padding. Di layar 360px tidak ada alasan empat kolom berdiri berdampingan.
Setelah pengaturannya bersih, guard CSS-nya saya cabut. Guard yang ditinggal permanen cuma jadi lapisan legacy berikutnya untuk developer setelah saya.
Verifikasi
Saya cek ulang di DevTools device mode dengan rulers menyala, lalu bandingkan lagi scrollWidth dengan clientWidth: sekarang angkanya identik. Tapi saya tidak berhenti di situ. Device mode tidak selalu jujur soal scrollbar dan momentum scroll, jadi verifikasi terakhir selalu di ponsel sungguhan: buka halamannya, coba geser ke samping. Halaman yang sehat tidak bergeming.
Pelajaran
Margin piksel untuk memposisikan elemen itu hack positional, dan hack positional patah begitu viewport berubah. Nilai desktop di Elementor turun ke tablet dan mobile secara diam-diam kecuali kamu meng-override-nya per breakpoint, jadi setiap angka px yang kamu ketik di desktop adalah janji yang juga kamu buat ke layar 360px. Debugging overflow horizontal itu selalu sama: temukan elemen yang lebar plus margin-nya melewati viewport, scrollWidth walk adalah teman terbaikmu. Dan yang paling penting: layout pakai gap, bukan pakai margin. Gap milik container dan ikut aturan layout; margin milik elemen dan membawa dendam lamanya ke semua breakpoint.