@andrew-j-brown
Posted
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!
