mobile-first-product-preview-card-component

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

html file:Had a problem with the srcset and sizes attributes.When i had set a break point of 800px and above for my sizes attribute,the desktop image was never being used.even on larger screens the webpage would only load the mobile one. I switched to using the picture element and did not encountered this particular issue.

css file:multiple struggles with border-radius.tried using border-top-right-radius:0; and border-bottom-right-radius:0; to remove the border on right corners and it had a weird behavior. It removed all borders on the corners except the top left one.So the bottom left also was removed even though i did not set the value to 0...

border-top-right-radius: 0;
border-bottom-right-radius: 0;

but using border-radius with 4 values fixed it.

Also ran into an issue with setting border-radius on the image.This was creating white space which I assumed was happening because i had not set the border-radius on the picture element which is the direct parent of the img. But when i did nothing was happening.So i ended up having to put the border-radius on the card too.This eliminated the white space.