Image moving out of line with other elements when resizing browsers

Hi,

I have a progress bar on the product page of my site that moves strangely when I resize my browser from the bottom. It moves out of line with my other elements. Any help with solving this would be great.
Thank you!


Here is my site Read-Only: https://preview.webflow.com/preview/emagin-2?utm_source=emagin-2&preview=89855c4e706321bc369d5a89663ca8d3

published site link : https://emagin-2.webflow.io/product

@Rebekah_Fisk Can you explain what you mean here? What exactly is the progress bar doing, and which elements is it not aligning to? Do you mean you can’t see the progress bar when you go to tablet mode?

In the full view of the browser the progress bar is under the text and almost in line with the image to the right of the screen.

But when I resize the browser from the bottom the progress bar moves over the text while the other image stays where it is supposed to be.

Does this clarify things? Or am I still not making sense.

Thank you

Hey hey, yes this clarifies I think. If you want my honest opinion, I would redo this whole section differently instead of trying to fix this issue. I can take a stab at it later tonight if I have time if you’d like. For example, your progress bar is about 800px long and is supposed to come off the left-hand side of the screen. What if someone is on an iMac? It may end up looking more like this, and I don’t think that’s what you want. Just LMK!

That would be a great help if you have time!

Thank you

@Rebekah_Fisk Found some time pretty quickly! Here would be my quick take on this section. Please let me know if you have any questions on what I did in the screen recording below. It’s pretty long and I had to stop to think a few times along the way haha. I also didn’t add your interactions back in as this was more of a layout thing.

https://www.loom.com/share/de27e227cb7140d78fca4ec724575ec0