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
https://thescalasaigwhisky.webflow.io/
Hey stan thanks for your reply
ive updated the link now
thanks
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
Hari
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
m2c
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
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
