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 using HTML5 and CSS

@VishRoy

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


Hi All,

Please let me know how can I improve my design .

Thanks

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Heya, good start on this challenge! There's a few things you could improve:

  1. There are a few ways to center your component. One of them would be: min-height: 100vh, display: grid, place-items: center on the body.

  2. Instead of width: 80% on the card you could do max-width. Using % is probably not the best choice of unit here, I'd stick to px/rem.

  3. Your buttons: they use the browser's default font-family, you need to set them specifically. Also, if you give them the same border you gave for hover state, that will keep them form jumping a bit.

Good luck ^^

Marked as helpful

0

@VishRoy

Posted

@FluffyKas Thank you for the suggestions :)

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