Simple question (?) related to a vertical scroll animation

I created sort of a timeline where there is a small animation when you scroll down with a dot that moves down the line and changes shape. I changed image dimensions however, which pushed this dot from the core line. I can’t figure out where and how I need to adjust the dot layout to ensure it stays centered on the line. Any help is much appreciated - thank you for taking the time to check.


Looks like you just need to change “.img-block” from 50% to 40%.

Thank you for your reply.

This was the reason I changed this in the first place; 40% makes the images too small; I need 50% and adjusting the dot based on that.

In this case
place the dot within a div with width = 0 and allow overflow
remove the -70px margin from the dot
change “.content-wrap” to 50% and give it 70px of padding on the left

You’ll need to adjust the alternating sections similarly

The basic key is have all structural divs add up to 100%. Right now you have one main column at 50% and the other at 40% which makes things more difficult to control.