Hello. I have a portfolio site that is still very early in the design process.
I wanted to take my website out of webflow to host on my personal server to see some of the things I could improve upon. When taken out of webflow however, the mobile version of my site has the menu extend beyond the view port and creates a horizontal scroll bar. I’ve noticed that this scroll bar only appears when I have the site animate in certain sections by applying a horizontal transform and opacity change when the section comes into view.
Here is what it should look like when viewed on a cell phone
This is something I’d really like to solve. I don’t want to get rid of the animation but I won’t sacrifice my hamburger menu working correctly for them. Perhaps there is a better way to do the animation then what I’m currently doing. My webflow link is below.
You have objects sliding IN on scroll. So before sliding IN they are staying OUT, increasing the width of the page. To kill the h scrolling induced, pass the sections with sliding objects overflow:hidden.
Give the overflow:hidden property to the sections, the elements just under body, which contains sliding elements.
What it does is it tells those sections to stop rendering what’s outside of them, thus returning the correct width to HTML and your page rendering without a margin.
If you were bug free after the page loads completely, was because once the sliding objects in the page, the page had the desired width. As long as 1 object is still outside, then there’s a margin.
Hi Vincent. Sorry I wasn’t more clear. I did apply the overflow:hidden property to the sections, NOT individual elements. And I’m still having the same issue.