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
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Four card feature section

@ssembatya-dennis

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


Hello everyone, This my second CSS solution using CSS Grid for my layout. I'm still learning Grid and I will highly appreciate any advise on how I can polish up my code and make my solution optimal. Thanks and wish you all happy coding.

Community feedback

enochlee 600

@iamenochlee

Posted

I see you are using grids, your layout breaks between 550px and 900px, ideally a tablet screen, first i think you should redefined the grid-template-column at this particular sizes to repeat(2, 1fr), since you are using tailwind that should be yourmediaquery:grid-col-2`, you can then reste it back to three at large screen sizes, while from 900px to 1200px, increase the width of the container, so the grid has more space. You can create custom media query in tailwind, check out the docs. Do well to check your website on responsive mode in your browser. i hope this helps, Happy coding, Great work!.

Marked as helpful

1

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