Streaming live at 10am (PST)

Grid items move when they enter viewport

Hi all,

ive added a grid element to the page but when the grid items enter the viewport they seem to step out a little for some reaon, this seems to only happen on the live published version.

if you see ini the gif the boottle shifts to the left when it enters

see site here

HI @Hari_Williams and welcome, your “read-only” link return 404

Hey stan thanks for your reply

ive updated the link now


I do not have these jumps in any major browser

Thanks so much for taking the time to look at this for me. could be an issue with some caching on my end if ths is the case.

ill be sure to check this on some other devices too

thanks so much

hi @Hari_Williams only one thing that cross my mind now is that it can happened when preview in Tablet first and then stretch out and start scrolling. What I mean is that it can have padding set for tablet and when it reach point of animation it will recalculate browser width.

I had these issues time to time. Since then I’m using vw that recalculating padding automatically instead of using fixed values in px for these MAJOR padding/margins between devices widths. There are online calculators px to vw to find basic vw value and than I just massage this value to my needs . I have good experience to use 3 decimals eg. 7.312vw


I thing I have found where is the problem. IMHO it is dynamically added class active . Explanation is in video

Stan, you are a superstar. ive removed the padding from the section that the class was being applied to and instead i added to the elements inside the div and that has solved this issue.

thanks so much for taking the time to help me out on this one. i couldnt figure out why the class was losing those properties

1 Like

hi @Hari_Williams I’m glad you have been able to fix it. If your problem is solved please feel free to check any response as solution to make this request marked as solved

Happy New Year and Happy coding