Skip to content
Submitted almost 2 years ago

Responsive Product Card Component using CSS Grid

Vas•110
@VasJM
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

This is my first Frontend Mentor project and it was heaps of fun since it's been a while (read: 4 years) since I've built anything! Who knew trying to figure out spacing and font-sizes from just a jpg was going to be this hard? 😂 I'm sure I'll get better at it!

I didn't come across any issues, but if someone could comment on how I structured and annotated my code, that would be great! I just want to know if I'm on the right path here. Although if there are any other issues, feel free to point those out, too! :)

ETA: Okay, so I just saw the FM image preview and it looks all wack, which is weird considering it looks perfect on my browser :(

ETA: I figured out the issue! Well, not an issue really. It's just that the default font size on my browser is set to 12px (my personal preference) instead of 16px, hence the supersized look. Should I change this?

ETA: I fixed it!!!

Community feedback

  • Rostyslav Nazarenko•560
    @rostyslav-nazarenkoPosted almost 2 years ago

    Hi, Vas! Your code is spectacular! 😍

    There is one issue that I found and trust that was hard because everything is perfect.

    Change px to rem or em for the max-width of the card, for media queries, and for a media query in the picture element. For media queries is better to use em. Why do I consider it an issue? If you slightly increase the font size in the settings card breaks.

    Marked as helpful
    0
    Vas•110
    @VasJMPosted almost 2 years ago

    @rostyslav-nazarenko

    Hi, Rostyslav!

    First, thank you for finding the time to go through my code, and second, thank you for pointing this out to me! I have made the change from px to em where needed, and hopefully all should be good now! This is a neat trick I'll be sure to use in future challenges/projects to check responsiveness!

    Hope you have a wonderful day 😊💖

    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