product-preview-card-component

Hi Matthew!

What I can suggest to you is:

-Try using CSS Grid to separate the image and the content:

.container .card {
    display: grid;
    grid-template-columns; 1fr 1fr;
}

It would help you with responsively and discard the position thing AND you won't need to use that much of @media (only in mobile width (375px at style-guide I guess).

About mobile design:

• I suggest you to set a break point when the image starts to crush:

@media (max-width: 450px: *the width is a suggestion*)  {
 .card {
    grid-template-columns: 1fr
}

 .mob {
    display: block;
}

Hope this can help you to find a way to improve your project. Keep coding.

(I'm new at this thing. Feel free to correct me:)-)

it looks nice , but the ADD-TO-CART-BUTTON , make the image to be nested in the button and use a display flex and a width 100% on the button , not positioning for the cart image . See if you like that better.

Positioning can work also, set a position relative on the parent element first so the element on absolute position doesn't look funny and screen resize and browsers.

Hi there, You can try <picture> element instead of writing media queries for the image.

<picture>
  <source media="(min-width: 650px)" srcset="img_lg.jpg">
  <source media="(min-width: 465px)" srcset="img_s.jpg">
  <img src="img-xs.jpg">
</picture>

That would be so easier. Hope it helps , Have a great time.