Skip to content
Submitted 6 months ago

responsive page using media queries and flexbox

João Vitor Morita•210
@joaomorita
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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

  • Koda👹•3,830
    @kodan96Posted 6 months ago

    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
    João Vitor Morita•210
    @joaomoritaPosted 6 months ago

    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

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