Blog-Preview-Card

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Great work on this challenge! The card looks almost spot on to the original design.

  I noticed that the card gets partially cut off at the top when you shrink the viewport's height.

  This is happening because you've set the height of the body element to 100vh.

  You can fix this by changing height to min-height:

  body {
    height: 100vh; ❌
    min-height: 100vh;
  }
  

  The card also isn't responsive to changes in viewport width.

  If you shrink the viewport width to the point where the card no longer fits on the page in its entirety, you run into the issue where the card gets partially cut off again, but this time on the left side of the card.

  This is happening because you've hard-coded the width of the card:

  .card {
    min-width: 21rem;
    max-width: 21rem;
  }
  

  This code is essentially the same as if you were to set the width of the card to 21rem with the width property, causing the card to be stuck at 21rem regardless of the screen size.

  You can fix this issue by simply removing min-width: 21rem.

  This will allow the card to grow up to 21rem, at which point it will stop growing.

  Other than that, this is a very good solution, and well done once again for completing the challenge!

  Hope this has been helpful! If you have any further questions, please feel free to ask me. :)

  Marked as helpful

  0

  ---

  

  tanasegabrielw•50

  @tanasegabrielwPosted 9 months ago

  @VenusY Thank you for taking the time to write such an in depth suggestion. I updated the code accordingly at it works just fine now!

  0

  

  Venus•1,640

  @VenusYPosted 9 months ago

  @tanasegabrielw Awesome! Glad I could help you out in some way. :)

  0