four-card-challenge

Community feedback

• 

  Justin•120

  @andrew-j-brownPosted 5 months ago

  Hi Kevin!

  Looks good, but I think there are a few spots we could improve upon:

  • Scaling the website from a desktop ratio to a mobile ratio causes the card proportions to stretch. This is most evident around the 700px range. At the very least, using max-width on the cards will prevent them from stretching too far, while still allowing them to be responsive. I would also recommend checking your breakpoints, and let the grid switch to a single column sooner, so as to prevent the cards from distorting when running out of horizontal space.

  • The svg images are being distorted based on the width of the card. Setting a consistent width should prevent this:

  img {
      height: auto;
      width: 4rem;
      align-self: end;
  }
  

  • It appears that a slight cyan border was applied to all of the cards, I'm not sure if this was a design decision or not. Should it be, I think coordinating the border colors with the top border colors on each card would bring some cohesion to the styling.

  • Lastly, I would advise adjusting the font-weight across most of the text to lighten it up a bit. The text in the style guide is actually quite a light font weight, something I didn't notice until returning to my project for some cleanup.

  I hope you find this helpful, and have a great day!

  0