Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product-preview-card-component-main

#accessibility
Yous 170

@yousra10

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone,

I just completed the challenge. Any suggestions are welcome!!

Happy coding!! Best regards, Yous Ben

Community feedback

P
Grace 27,710

@grace-snow

Posted

Hi

This seems a bit rushed. It''s got explicit heights and widths meaning this will break for any users who resize their font/zoom settings. Test what I mean by setting your browser to 'zoom text only' then zoom in on desktop. You will see content spill out of the card.

There is rarely a good reason to limit height, which is why we recommend min-height instead.

I also recommend against using input type button. That's a deprecated element from before the button element existed! And anyway, looking at this design, I don't think it would be a button at all, it would be an anchor tag.

Really take your time and think through the html carefully.

Last thing - the image gets distorted in some views. Check out the object-fit property!

Marked as helpful

0

Yous 170

@yousra10

Posted

@grace-snow Hi Grace, Thank you very much for your comments. I remove the `min-width: 100vw; I replace the input button by an anchor tag. I will learn about input and anchor tag. Thank you for the object-fit property. Thank you Grace for your feedback, it helps me improve...

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord