Skip to content
Submitted about 1 month ago

RWD Product Card using CSS grid

Kevin Shie•20
@Sheepnore
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 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.

Community feedback

  • gowtham•100
    @gowthamjk08Posted 13 days ago

    make sure that the webpage is responsive for all kind screen sizes.

    0

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