product-preview-card-component

Wrap the html content in a main tag<main>, <h6> with <p>, and add the alt attribute alt=" " to the img tag to fix the accessibility and error issue. click here for more on web-accessibility and semantic html Replace the <span> within the <h6> with del tag <del>, for the del tag will do the in-line styling you gave to the span.

There is no need to give the body a max-width value . To center the content on the page using flexbox, add min-height:100vh to the body. Remove the margin value from the body you can give the body a padding top and bottom value.

Add the desktop image to the div containing the mobile-image, in the mobile design , give the desktop-image a display of none and style the mobile image, in the desktop design, give the mobile-image a display of none and desktop-image display: block.

In the mobile design give .container a fixed max-width value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

I will update the corrections on git.. Btw, how do I give a max-width for columns to stop them from growing at a certain breakpoint say 992px?