~~Solutions to fix sections moving on mobile view
😀 Hi y all , some time ago I ve seen on my YT feed a video posted by Kevin 🔴 where he fixed the moving of sections on the body while scrolling in mobile 🔺 , does somebody know the link for that ? or the solutin either one of thouse could really help 📗
19 Replies
I don't know the specific video, but I'm guessing I used either
position: fixed or position: sticky@Kevin Powell Oh my bad, let me rephrase it, how can I stop the sections from moving on Y axe while scrolling ?
As Kevin says,
position: fixed or position: sticky.
In general terms "fixed" will fix the element to the viewport and not move while scrolling. This is often used for a header that you want to remain visible at the top all the time.
"sticky" is similar, however in this case it will be "stuck" to it's nearest ancestor element that has a position absolute or relative. The difference is that, once that parent element scrolls out of view, the "sticky" element will also scroll out with it.ah that makes sense now, I had a vision that sections will move with the scroll if I ll do that LOL
I tried both positions but the sections still move up while I scroll up in the mobile........
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
you need to set the actual position, eg.
top: 0top: 0; will set the section at the top of their actual position in app or in the top of app ?
I did top: 0; for all comp and tried with both positons , but that only makes them stick to the top of the viewport and it makes them overlap eachother
For position: fixed it will be the top of the body.
For position:sticky it will be at the top of the ancestor with a position relative or absolute defined. If they don’t have an ancestor with the position defined, it will default to the body (ie the viewport in most cases)
As Lamer has suggested, if you could set up a codepen with what you have (just the relevant part) that might make it easier to see what is going on.
In codepen you need to put the generated HTML in the HTML tab. It won't compile React as is.
That said, looking at your CSS, you have used
postion: fixedon everything. That is why they are all stacking at the top.
Place the generated HTML code in codepen and we can take another look to try to see what you are trying to achieve and where you might be going wrong.ok, getting there. Now you need to add some content otherwise there is no scroll and therefore nothing to test.
Also, what is it that you want to stay at the top?
I can add some context or specific height , but still that won t really help beacuse the problem is taht browser doesn t show this problem of sections moving on Y axe when scrolling happens only in the deployed version in the actual phone you can see this happening
Why can't this be seen in a browser? Are you using some JavaScript to target specific devices?
in the browser / pc / laptop / tablem the sections / components doesn t overlap , this happens when I open the app on the mobile / actual phone
@Lamer of Sweden @Chris Bolson In the responsive mode of the browser the sections doesn t overlay , the problem exist in the actual mobile view in the phone
but you should still be ablt to test this on a browser by making it smaller or (preferable) by using the dev tools responsive mode. That is unless you are defining different content/styles specifically for mobile devices via some JavaScript trickery.
in none of the responsive mode offered in browser the componnetes doesnt move on Y axe , i discovered this problem when I checked the app in my phone to see how it look
the styles used for the the are placed in the pen above
Can you do a screen recording on your phone to show what's happening?
What OS and browser are you testing on on the phone
I just fixed it this morining @Kevin , I m using chrom across all devices