Skip to content
Submitted 6 months ago

Product Card Mix of Grid and Flex

WebDevJoe•70
@JoeWebDevelopment
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?

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
    @mathematiCodePosted 6 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
    1
  • Isabela Fernanda•170
    @Isabela-FernandaPosted 6 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
    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