Skip to content
Submitted over 2 years ago

Product preview card component solution

Eric Beaulieu•30
@cyberic67
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

It took me a wild to figure out how to change the img src attribute depending on the device screen size.

I have used grid for the card, but I wonder if other developer have used flex-grid instead.

Naming class is always difficult. Trying to use BEM principles but it's not always obvious.

Can't wait to see other developer solutions!

Community feedback

  • Elaine•11,400
    @elaineleungPosted over 2 years ago

    Hi Eric, well done completing your first challenge! Great job in figuring out how to use the picture element, and I also like that you're using responsive width and height properties. On that note, I see that you got a min-height: 100vh; you can actually use that to center your component so that it stays in the center by adding this:

    body {
   min-height: 100vh;
   display: grid;
   place-content: center;
}

    Great work, and hope to see more projects here!

    Marked as helpful
    0
  • Yahir Zuniga•40
    @Le-YzzzPosted over 2 years ago

    looks like im not the only one that struggle to make it the exact size 😅. looks good bro. i actually used flex instead of grid, but maybe i'll give grid a go? :)

    0

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