UX Mobile Page scrolling...
On mobile i have this weird shiftin where container goes up and down when scrolling. I dont understand why it does this, its not because of the gsap animation because i tested it. I also made the font bigger and it does that but why. Or if its not the font, what does that.
https://batman4ever87.github.io/jussi/
Jussi Valli - Toimittaja
Urheilutoimittaja Kankaanpäästä
14 Replies
it's very likely the use of dvh on the height of the hero
when you scroll on mobile, the height of the viewport changes as the URL bar folds away, and that means your page reflows with the changing dvh value
Kevin has a video about viewheight units: https://www.youtube.com/watch?v=ru3U8MHbFFI
Kevin Powell
YouTube
Use these instead of vh
Looking to step up your CSS game? 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=viewportunits I have a bunch of courses, including several free ones.
I see people use
vh a lot, and then complain that it doesn’t work the way they thought it would, so in this one, I explore a few other options that we have,...God damn. You are correct! That was the problem. Thanks man! Now its fixed. Cheers buddy.
Glad to help!
Found another problem. The content is slightly overflowing to the right on mobile. I made the marquee (react component anyway) to overflow hidden and body is overflow-x hidden. Still its slightly overflowing.
https://batman4ever87.github.io/jussi/ updatet version
Jussi Valli - Toimittaja
Urheilutoimittaja Kankaanpäästä
your rotated "scroll down" image is pushing out of bounds
ohh yea! Damn. What would i do without you man! Haha thanks again
haha, glad to help again 🙂
another problem: there's minimal layout shift on the hero section. I cant figure how do i fix it. I changed min-height and height of the hero or is it the GSAP animation what does it. I think it is the background image.
Also overall, what do you think about the layout so far, fonts (i havent paid that main font yet), colours and all?
your best bet is probably to make a new post for new issues. I don't think I'll be able to look at it today or tomorrow, got a busy couple days at work and at home
Ohh, i thought i can pump up old thread up 😄
we try to keep threads to one topic, so that if people are looking for similar problems, they can find them more easily. A thread with less history is also easier for people to jump into and help. The layout shift is probably a good post for #front-end, feedback is #ui-ux
And yeah, you can bump posts, but mostly to get it back to the top of the topic list if the problem isn't solved yet (also, these aren't super hard rules. I'm just saying I won't be able to look for the next couple of days, and you're more likely to get help from others with a fresh thread in the right channel)
Yes. I'll do that! Thanks