ecommerce product page using HTML CSS JS

What challenges did you encounter, and how did you overcome them?

Normally, I start by coding the desktop layout first, but this time I tried building the mobile layout first. However, I ran into a few challenges.

I think I should take a closer look at both the desktop and mobile designs beforehand, so I can plan the HTML structure better and decide which layout to develop first based on the context.

What specific areas of your project would you like help with?

I'm still working on optimizing the responsive behavior and positioning of some elements. For example, when resizing the screen, the cart icon or the "prev" and "next" buttons don’t stay centered within the lightbox.

I'm unsure whether the cart should be positioned relative to the img element or the entire container for better flexibility. I’d appreciate any tips on which CSS properties (like using percentages translate or flex/absolute positioning) work best for responsive alignment in these cases.

Also, I just realized that my laptop display was set to 75% zoom, so some parts of the UI might appear larger than intended when viewed at 100%.

I haven’t added a limit to the number of cart items or restricted the cart display height yet. Ideally, I want it to become scrollable when there are too many items — probably using overflow: scroll or similar.

Thanks in advance for any suggestions!