I can’t figure out why my sites home page has a horizontal scroll on mobile view? I have a hunch the problem lives in the slider, but am hoping there is a solution. Any feedback?
Thanks!
Preview: https://preview.webflow.com/preview/rootsecure?preview=35d87f6f0179a4dfd80f46774bd2b78d
Live:http://www.rootsecure.com/
Here is my site Read-Only: LINK
(how to share your site Read-Only link )
The problem is from this combo classes:
header-banner hero-section
(navbar)
Remove the negative
right/left margins (Why?).
Since the recommendation of CSS2 back in 1998, the use of tables has slowly faded into the background and into the history books. Because of this, CSS layouts have since then been synonymous with coding elegance.
The problem is in slider and Contact form.
Horizontal scroll means your content is wider than your screen.
In the slider you have a lot of margins. Check all elements and remove all margins positive and negative. Make sure no element in wider than 100 vw.
In the contact form - text fields you have a Right Padding of 237px. Remove it.