Skip to content
Submitted over 3 years ago

Mobile-first solution using CSS Grid

Erel Ropeta•385
@ereljapco
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I am happy overall with the final appearance of the Huddle landing page. But I wasn't able to make it responsive. I was just able to make the mobile and desktop based on the widths given (i.e. 375px and 1440px).

Can you share ways to make it responsive using CSS Grid? I tried to redo it several times, using CSS Grid with different CSS units, but I always messed it up. I hope you can share your ways/techniques or if there are helpful articles/tutorials you can share with me, that'll be great.

  1. What are the device-widths you use for media queries?
  2. What CSS units should I use for a responsive layout using CSS Grid?

Community feedback

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord