Skip to content
Submitted 6 months ago

Responsive product preview card using flexbox and grid

Dustin Knie•210
@nullpuppy
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?

Not much to call out here, in my opinion, but I'm pretty happy with the use of semantic HTML and general css names. I tried to limit how specific the styling was to the content, so it could, in theory, be used for other types of content, but using the same style/coloring.

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

The only real challenge I had to work through here was the working through making the design responsive. I ended up relying on fixed dimensions. I'm mostly happy with what's here, but I would really like to figure out how to allow for a bit more dynamic resizing of the content while preserving aspect-ratio of images and such.

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

Any feedback is welcome. I'm far from an expert in frontend dev, but I'm definitely getting more confident from working through these projects.

Community feedback

  • Filip Juszczak•690
    @filipjuszczakPosted 6 months ago

    It's a good idea to include box-sizing: border-box; in your universal selector *:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    It helps you better control your elements dimensions, especially when working with borders/paddings.

    Good job choosing rem as the unit in media queries, you could also use em.

    Well done!

    Marked as helpful
    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