Product Preview Card

I think the vh and vw don't work well because people have different aspect ratio screens. So your card may be too tall or too wide depending on the monitor.

You can try manually setting a width and height for desktop and mobile so that the card stays the same shape.

Also try looking into object-fit: cover as I was able to stop the product image from warping using that.

Adding some padding-right to the product-info class will help make the text fit better and using line-height on the different p tags can help you get closer to the design image (somewhere between 1.5 and 2)

you need make it responsive. It should be looking differently for mobile screen and desktop.

👾Hello again Murray , congratulations for your new solution!

I've two tips for you to improve it, the first is about the picture tag to wrap the images and the other is about the image that's distorting and its not responsive yet.

1.Something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

2.The best to way to have this image and every image responsive and easy to work, its by creating a general property adding display: block and max-width: 100% to make it fits the size of the container the image is inside and also respect the container width while scaling, add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

✌️ I hope this helps you and happy coding!