Play Video

How to Fix Horizontal Bar Scroll in mobile with Elementor

In this video, I discuss how to fix the horizontal scroll in Elementor when you view the page in mobile.

The overflow happens because a graphic element is larger than the viewport can accommodate (e.g. 400px image on a 375px smartphone) or text that also has a larger size that can fit properly in the viewport. It can also be caused by using position:absolute improperly.

Thanks to Elementor Codes for developing this awesome code.
The code can be found here:
https://elementorcodes.com/remove-elementor-horizontal-scroll-mobile/

STEPS:
1. Open the page in another tab in preview from Elementor.
2. Inspect to open the page in consule mode selecting the device type from drop down menu.
3. Under consule tab, paste the code and then press Enter.
4. Go back to elementor and goto the sections which are overflowing. In the section, go to Layout, Overflow, and change to Hidden.
5. Update and check if that fixed the problem.

Note, as a rule of thumb it’s good to always design FIRST for mobile and then desktop – not vice versa!

In addition to checking the developer consule, use a physical IPhone and Android phone to see if your website is fully mobile optimized. If it looks good on these 2 phones, 90% chance it’s mobile-friendly.

If you liked this video, consider subscribing! Also, check out my Patreon account. I’m currently saving up for Camtasia video software editing and a microphone to make EVEN better videos for you guys!

www.patreon.com/supernovasites

My website: www.supernovasites.com

👋Say HI to me on Social Media
Instagram: https://instagram.com/supernovasites
Facebook: https://facebook.com/SupernovaSitesTO/