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

responsive page using media queries and flexbox

@joaomorita

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


What are you most proud of, and what would you do differently next time?

I'm proud to do this one, I think I'm using better the semantics of html.

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

I don't know, I think I didn't have a really challenge on this one

What specific areas of your project would you like help with?

Maybe some advices about the image, because at the mobile display it is losing quality

Community feedback

P
Koda👹 3,810

@kodan96

Posted

hi there! 👋

If I'm right you get a different image for the mobile version, which has a horizontal orientation, I guess you should use that on your mobile layout, and use this one only for your desktop version.

you should also apply object-fit: cover; to it to prevent the streching

Hope this was helpful 🙏

Good luck and happy coding! 💪

Marked as helpful

2

@joaomorita

Posted

I totally forgot about the mobile image. I'll use the object-fit, Thank you!! @kodan96

1

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