Skip to content
Submitted about 2 months ago

Responsive solution with CSS Grid and Flexbox + tablet responsiveness

LouisVerch•180
@LouisVerch
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I designed for the first time with a mobile first approach I set up variables for font and used clamp for extra responsiveness I am proud of my grid media query for tablets

What challenges did you encounter, and how did you overcome them?

I struggled with tablet responsiveness at first but managed to do it with an extra max-width

Community feedback

  • wiceldric75•340
    @wiceldric75Posted about 2 months ago

    Not much feedback I can give your HTML and CSS is very well put together. Your ability with grid is very impressive. I actually learned how to better do the lines up top from looking at your code, so thank you.

    1
  • Zarak•100
    @zarakPosted about 2 months ago

    Really nice use of CSS grid with the mix-max property! I like that the tablet grid is organised in two columns rather than three to allow the cards to have more room.

    The CSS is also neatly organised with variables for colours and font-sizes.

    Good use of semantic HTML too!

    I wonder if you could use a variable for spacing, like for example the gap of 2 rem. I can't think of anything else to add - great work!

    0

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