Product preview card component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Sarvotham, well done completing this challenge, and yes, the responsiveness part of this challenge is what most people find tricky. About your question, the reason why things aren't shrinking is because in your grid, you are using fixed widths in pixels for the columns and rows. What you can try is to use 1fr instead and then set a max-width on the container. That way, your card can still expand and shrink, and the columns would be even.

  In case you need some suggestions, here's what I'd do:

  // in desktop view: 
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      max-width: 600px;
      margin: 1rem;
  }
  
  // in mobile view 
  .container {
     grid-template-columns: 1fr;
  }
  img {
     object-fit: contain;
     height: 100%;
  }
  button {
     padding: 1rem;
     width: 100%;
  }
  

  Hope this helps you!

  Marked as helpful

  2

  ---

  

  Sarvotham Gowda•210

  @sarvothamgowdaPosted over 2 years ago

  @elaineleung this is helpful. Thanks for sharing it.

  Question: Is it mandatory to declare grid-auto-rows?

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @sarvothamgowda It's not mandatory at all, in fact it might be better usually for the browser to figure it out. I don't normally add it unless there's a necessary reason to. This is something called implicit grid where we don't define the rows but the browser does that implicitly; I think Kevin Powell has a video explaining this on his YT channel, so you can check it out if you're interested to learn more.

  1