Skip to content
Submitted about 1 year ago

Product preview card with desktop and mobile version using flex box

Nomy•130
@Nomylim
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?

This is my first time using flexbox. I think I managed to create something that meets the challenge requirements.

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

I'm still struggling a little bit with the various flexbox properties, but I believe I'm starting to get the hand of it.

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

However, I'm not entirely satisfied with the transition between a large desktop screen and a small mobile screen. Does anyone have any advice on this?

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    Rafael Dias•1,060
    @rafaeldgeo

    Hi @Nomylim It's normal we have difficult with flexbox! I saw the images are link broken. You can use point "." before the slash srcset="./images/image-product-mobile.jpg". It's happening because the images are another folder.

    Marked as helpful
  • yesim•200
    @ysmltr

    hey nomy love your work, but I couldn't see photo of perfume maybe u want to fix? good job and best regards!

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