Responsive page using CSS Grid

Community feedback

• 

  MioMauro•400

  @MioMauroPosted over 2 years ago

  Not perfect, but better @media only screen and (max-width: 1200px) { body {
  height: auto; flex-direction: column; padding: 0 50px; } body .container {
  display: flex;
  flex-direction: column;
  }

  0
• 

  Tom•290

  @tomhinePosted over 2 years ago

  Hi Claire, really nice job with the desktop view!

  I noticed a couple of issues with your mobile view;

  • You're setting your body element to height: 100vh. This breaks on mobile because your card list height is much larger than this. I'd reset that on mobile.
  • You also need to change the body padding on mobile. Honestly i'd probably move this padding onto your main element.
  • As for the mobile layout, I'd probably just swap to using flexbox with a colum direction and a gap.

  Hope this helps 👍

  0