Skip to content
Submitted over 2 years ago

3-column preview card with Grid, Sass/Scss, React

Melwyn•250
@melwynt
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

For this challenge I used CSS Grid instead of Flexbox.

It's the first time that I use Grid and pretty happy so far with the result.

Please let me know if you notice anything in the CSS that could be improved.

Thanks

Community feedback

  • Divine Obeten•2,415
    @Deevyn9Posted over 2 years ago

    This is great, adding margins to the top and bottom on the mobile view would be great too

    1
    Melwyn•250
    @melwyntPosted over 2 years ago

    @Deevyn9 Thanks! That's a good idea. The screenshot provided for the mobile design was 1502 px in length and I forgot to check how it would look like on a phone for example.

    1
  • Account deleted

    Hello there! 👋

    Congratulations on finishing your challenge! 🎉

    I have some feedback on this solution:

    • add tranistion:1s; to the button so that when you hover on the button the background changes smoothly

    hope this is helpful

    1
    Melwyn•250
    @melwyntPosted over 2 years ago

    @Old1337 Thanks! That will indeed makes it a bit more polished!

    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