CSS Flexbox, Responsive & Variable

Community feedback

• 

  Teddy•310

  @tedaussie75

  Posted over 3 years ago

  Great Job ! It looks very nice ! If you want to fix the glitch on the card hover you can add these changes bellow to your code :

  • .img-container { border-radius: 1rem; }

  • .card-img { display: block; }

  • .view-hover { height: 100%; }

  Comment : /* .view-hover => height: 99% is not working it is making an issue here */

  Hope it would help you !

  11

  Marked as helpful
• 

  Teddy•310

  @tedaussie75

  Posted over 3 years ago

  @KareeMagdyy No worries ! I went through the same issue ahah

  The main issue was the image container, it was a little bit bigger than the image.

  By switching the images display to block, the image and its container have the same size.

  And the border radius need to be applied to both the image and the container to make it look Nice !

  I'm glad that it works for you too ;)

  00