Skip to content
Submitted about 1 year ago

RWD Product Card using CSS grid

Kevin Shie•20
@Sheepnore
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?
  1. Changing img based on device width: Using solves the problem.
  2. The border-radius not applying on the container: The issue was the img is bigger than the grid container, causing it to overflow. Setting overflow: hidden will clip out the overflowing part of img.
  3. The img is too big for grid container: To shrink it down to fit the container, setting max-width: 100% height: auto on the img. max-width: 100% ensures that the img cannot be wider than its parent element. After that, setting display: block will fill out the empty space in the column where img is in.
Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Kevin Shie's solution.

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