Skip to content
Submitted about 2 years ago

Responsive Four card feature section

Ssembatya Dennis Duncan•260
@ssembatya-dennis
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

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
    @iamenochleePosted about 2 years ago

    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

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