Skip to content
Submitted over 2 years ago

Perfume page with some flexbox and grid

sudaspace•50
@sudaspace
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is it a good idea to center an image using flexbox like this? I'd first tried setting the height/width and margins but it got very messy.

I was at a total loss at the beginning so I looked at others' work, figured out how it was done and then built mine. I'm not sure how else to learn how to do this, but I also don't like "cheating". How do you recommend figuring these out when you're totally stuck?

I don't think my mobile media queries are done well. Is there something obvious I'm missing?

Thanks for any help!

Code

Please log in to post a comment

Log in

Community feedback

  • Saulius K.•560
    @TH3RIV

    Hi, @sudaspace!

    Centering using flexbox is perfectly fine and using margins to center something is definitely not the right way IMO. The card looks great in desktop mode, but has problems with mobile. You should always start mobile and then move to desktop.

    Addressing issues with your design:

    • Mobile card is too big and occupies the whole screen, height and width.

    Try setting max-width, adding padding to the body or making the card to not take 100% of the width.

    • The previous price font is wrong and should be the same one as the description.
    • Button needs some work, add a button:hover and cursor styling, so the button is interactive.

    Hope this helps!

    Marked as helpful
  • Rocky•50
    @stallone1

    wow your projects looks awsome follow me so you can see how mine looks i’m going submit mine in an hour how did you manage to get it to mobile version ?

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