product-review

Hi, let me recommend you this code for changing the image depending the screen's size:

<picture>
    <source srcset="desktop.jpg" media="(min-width: 1024px)">
    <source srcset="tablet.jpg" media="(min-width: 768px)">
    <source srcset="mobile.jpg" media="(min-width: 377px)">
    <img src="mobile.jpg" alt="Main Image">
</picture>

And for alignment of the box... you can do something like this:

<main>
    <div class="box"> ... </div>
</main>

And you give the main element a display of flex, align-items of center. That's it! (You can also give the box div a margin of auto) I hope that works! Good luck

I use position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; to align my container straight to the middle, just make sure that you also set the height and width.