Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product preview card component using CSS Grid

Chilufya 30

@cmmutale

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

The responsiveness of the images. I utilized the `` to achieve the smooth transitions of images between breakpoints, without the need for additional css.

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

There is a little shift in the right side of the card in desktop version. I reduced it by utilizing grid instead of flex.

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

Even though I managed to reduce the shift in height of the right side of the card in desktop, the element there does not cover the entire height of the card. I assume the image has some hand in this and I am not sure how to handle it so that both grid items can have the same height.

Community feedback

@suzzy-dszy

Posted

  • Your solution closely matches what is expected great job on that, and as for the issue you have highlighted, I was having the same problem and you are right to assume that the image influences your output.

    • To have the right hand grid-items to take up more height, try using the css clamp() function in your media queries, this will allow your font to dynamically scale with the viewport width to help achieve the look that you want. You may want to read a documentation / watch a video on the property as it is a bit much to understand exactly what's happening at first.
  • If you don't mind, could you review my solution to this challenge as well? I followed a mobile first approach and when it came to achieving the required desktop looks i failed at that as my product card is really big on larger screens and alas i couldn't figure it out. Any help will be much appreciated 🙏.

  • Otherwise Good job 🙂👍.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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