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

HTML E CSS

@ZakJam

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

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Congratulations on your effort. There are a lot of thing you need to fix

  • Using CSS grid is a good thing, but you don't need grid-template-columns: repeat (10, 1fr); this is overkill. Change this to grid-template-columns: repeat (3, 1fr);. You only need three columns.
  • The same goes for grid-template-rows: repeat (20, 1fr);. You only need one row.
  • There is no hover effect on the buttons.
  • The text container are been compressed. Give it a bit of more space.
  • When going to mobile everything gets squeezed.

See if you can fix these issues.

Marked as helpful

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