Submitted over 1 year ago

Responsive Product Card Component using CSS Grid

Vas• 110

@VasJM

Preview site View code

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

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-nazarenko

Posted over 1 year 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

Vas• 110

@VasJM

Posted over 1 year 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 😊💖

Please log in to post a comment

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