Responsive product card (CSS GRID + SASS/SCSS)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Cristina, congratulations for your solution!

  Your solution seems really great, I can see that you've paid attention to the details, the media query works really good. There's only some details you can consider fixing.

  Here's my tips:

  1.You've added some hover effect that makes the container image grows a little bit and this makes the image pop out from the container, to keep the image inside the container limits use overflow: hidden;.

  2.Here the problem is the opposite of the first tip, you've added overflow: hidden; to the class called card__image note that when the container starts to contract, the property overflow makes the text information like the button and price get cropped, if you've add overflow: hidden to manage the image borders, you can just use border-radius for the left top border image borders.

  The rest is all amazing, your container is super fluid and responsive.

  Congrats!

  I hope it helps you Cristina, happy coding!

  Marked as helpful

  0

  ---

  

  Cristina Kelly•140

  @cristinakellytPosted over 2 years ago

  @correlucas Hi Lucas! Thank you so much for your feedback!

  For sure I had some problems with the overflow: hidden; property and actually, I gave a look and I think the problem related to your tip 2 is because this property was added in card__content, so I fixed this.

  But for your tip 1, I couldn't figure out how to solve it yet because I added the overflow: hidden; and didn't work in this project. I already did this in other projects and it worked well, maybe I am letting something pass. I will give a deep look at this!

  Anyway, thank you so much, it is really great to have feedback when you are in the beginning!

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @cristinakellyt Happy to hear that Cristina, I've just checked again, and seems that the error comes from this class

  @media only screen and (max-width: 37.5em)
  .card {
      /* grid-template-columns: 95%; */
  }
  

  A quick way to build this layout with two columns is simple giving a max-width: 900px for the main container and grid-template-column: 1fr 1fr; this way you'll a template with two equal columns and each column automatically with 50% of the main container.

  Marked as helpful

  0

  

  Cristina Kelly•140

  @cristinakellytPosted over 2 years ago

  @correlucas Hi Lucas, it is really a more simple way to code this part, thank you!

  1