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

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

Melwyn 250

@melwynt

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@Deevyn9

Posted

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

1

Melwyn 250

@melwynt

Posted

@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

@melwynt

Posted

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

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