Submitted 4 months ago

Product Card Mix of Grid and Flex

WebDevJoe• 70

@JoeWebDevelopment

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Use more utility classes, and rely more on global variables. I'm proud that this one has a lot of responsiveness.

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

I had a challenge with the picture/image changing, but googled the solution using a srcset and media to match the media queries. I was also having issues of white space as it grew, but just used a break point of the media query to prevent that and max the width along with creating a mid-width to have consistency.

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

Please give it a look over. I know I need to add more for accessibility and screen reader users but that is not an area I have much knowledge in.

Community feedback

Julianna Messineo• 180

@mathematiCode

Posted 4 months ago

I enjoyed how you used CSS variables for the fonts and colors. I didn't think to do that. I also CSS grid and I like how you defined the grid template under the media query. My solution used "display:none" to hide each image depending on the size but I can see how that might not be ideal for download times. I'll have to look into srcset.

This was pretty easy for me to understand, and I learned from seeing how you did it, so thanks!

Marked as helpful

Isabela Fernanda• 170

@Isabela-Fernanda

Posted 4 months ago

Great HTML semantics. The responsiveness is also good, but if you want to increase it you can make two @media, one for tablets with @media(min-width: 768px), and another for desktop with @media(min-width: 1440px)

Marked as helpful

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