Cara Menghilangkan Horizontal Scroll Bar di WordPress dengan Elementor

Siapa yang di websitenya pernah muncul horizontal scroll bar? Buat website yang belum responsive mungkin masih bisa dipahami kenapa muncul scroll bar yang horizontal tersebut. Tapi, kalau websitenya sudah responsive tapi muncul horizontal scroll bar, gimana?

Hal ini pernah terjadi di salah satu website yang menggunakan platform WordPress dan page builder Elementor. Dimana tampilannya sudah responsive, tapi ternyata muncul scroll bar ke samping yang buat tampilan website-nya jadi terlihat aneh.

Setelah mencari tahu dan mencoba beberapa cara, ada cara termudah yang dapat dilakukan untuk menghilangkan horizontal scroll bar yang terjadi di WordPress dan Elementor ini, yaitu dengan menggunakan Custom CSS. Tidak usah khawatir jika kamu memang belum paham dengan coding, karena kamu bisa langsung copy-paste atau menuliskan ulang saja.

Yuk, ikuti langkah-langkah berikut ini!

Cara Menghilangkan Horizontal Scroll Bar

Untuk menghilangkan horizontal scroll bar yang mengganggu di website WordPress, ikuti langkah-langkah berikut ini:

1. Buka page dengan Elementor
2. Masuk ke Page Settings dengan klik icon gear yang berada di pojok kiri bawah
3. Klik tab Advanced
4. Scroll hinga menemukan Custom CSS, lalu masukkan kode berikut ini:

html, body{
max-width: 100%;
overflow-x: hidden;
}

Setelah itu, jangan lupa klik tombol Update lalu refresh. Sekarang horizontal scroll bar sudah tidak ada!

Bagaimana? Sangat mudah, bukan?

Kenapa Muncul Horizontal Scroll Bar?

Horizontal scroll bar biasanya muncul karena ada elemen yang ukurannya lebih besar dari layar atau container-nya. Dengan memasukkan kode yang ada di atas, kita jadi membatasi max-width agar tidak melebihi 100% dan menyembunyikan overflow horizontal. Sehingga, hasilnya tampilan website menjadi lebih rapi dan nyaman dilihat pengunjung website.

Jika kamu ingin belajar membuat website dengan WordPress, kamu bisa mengambil paket kursus digital marketing yang salah satu materinya adalah WordPress. Yuk, belajar membuat website dan mengoptimalkannya dengan digital marketing di DUMET School!

Semoga artikel Cara Menghilangkan Horizontal Scroll Bar di WordPress dengan Elementor ini bermanfaat! Sampai jumpa di artikel yang selanjutnya :)