Used Flex and media queries to make it responsive by width

Community feedback

• 

  Trey•290

  @willettoPosted over 2 years ago

  Hi RadeQu. Nice work. I have a media-screen suggestion and a layout suggestion.

  1. You don't need a media-screen for both mobile and desktop. Write all of your base CSS (colors, hover, card layout) AND your mobile-specific layout without a media-screen. After that, add @media (min-width: 800px){} and put your desktop specific CSS in there. This is what people mean with "mobile-first workflow". It also goes way faster.

  2. Your cards look great, except they overflow from the borders. You have two options to fix this. You can change your margins to padding. Or add a class of 'card' to each div, and add CSS styling the card. .card {display: flex; flex-direction: columns; justify-items: space-between; padding: 20px;}

  This video might be helpful in understanding the difference between padding and margin: https://www.youtube.com/watch?v=zqDdws_Hvmw&ab_channel=Treehouse

  Marked as helpful

  1