Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

first site using CSS GRID

@kpratik1929

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


i wanted to change the width of the boxes properly but it was always changing whenever i zoomed in the browser ,I tried the media keyword also still counldn't get rid of that problem properly.can anyone tell me the solution for this part?

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Nice work on this challenge, you've done a really good job and it's great to see you practicing Grid 👍

Your boxes aren't changing width correctly because you're not defining your columns. I'd recommend using something like this grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); and reducing the padding from .top on mobile. You'll need to play around with the values a bit, but that should get you close. auto-fit makes sure elements break to a new line if there is not enough space, as set by the minimum width in the minmax function.

I hope that helps. Keep up the great work! 👍

0

@kpratik1929

Posted

@mattstuddert thank you

0

Please log in to post a comment

Log in with GitHub
Discord logo

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