I need help, I can’t figure out how to fix the horizontal scrolling issue on mobile. Some elements are crushed while others are fine. I’ve checked all my layout and it looks fine on the mobile preview when I’m using the designer, but when I check on my actual phone it’s all messed up. If someone can help please let me know I’m getting desperate 😵
alright, if you really want to solve this problem super quick and I can tell you exactly what the solution is, you'll have to share a duplicate of the project with me. If you are good with this, DM me and I can send you my Webflow email.
It'll be trial and error. I see that you have a few overflow hidden sprinkled around in your attempt to get rid of the horizontal scrollbar.
My next steps, in the duplicated project, will be to remove each section one by one and publish it after each section is removed - until I don't have the horizontal scrollbar anymore. That will at least clue me into which section is causing the problem.
Then from there, I would pick apart the elements, to see which elements would be overflowing in the first place (position absolute or widths etc).
If its not painfully obvious what element is causing the issues, I will do the same thing but with the elements - I will remove each element until I no longer have a horizontal scrollbar, and that will clue me into which element I need to focus on.
Its tedious, but as you've probably realized so far, its like trying to find a needle in a haystack when you are just sort of randomly trying things to get rid of the horizontal scrollbar - with this approach there is at least some method to the madness. Absolute madness.
As for things get squished down - my biggest advice for that, if you don't want things to be squished - and the elements that you have your site don't serve as any sort of informational purpose - you should really make them background images to the section. So for the wavy transition in your navbar and footer - I would make those background images to the navbar and footer - this will allow you to keep the original shape, but you can still position these elements responsively. Hope that makes sense - if none of this makes any sense at all, I'm happy to do a loom video.
If you are completely fed up with this entirely, just kick over a DM, I'll record a loom of the solution, so you can see it in action for next time. ✌💪
