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 component

Luca Toni 80

@shavedhead

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


I was having some trouble with the positioning of the boxes in this one. Any advice would be greatly appreciated!

Community feedback

@Nick-Gabe

Posted

Hey Luca, what's up? Your solution is really good, the spaces between buttons, the width of the boxes, everything perfect! :)

I only have a few suggestions for you:

  • On this case, instead of flex, try using grid. It will not change the visual itself, but for me its a good opportunity to train it while making everything responsive.
  • The boxes have borders on every side, but on the design they should appear only in the corners of the boxes. You used the border-radius shorthand right, but by adjusting the values you would get a better result.

That's it, see ya Luca 👋

0

Luca Toni 80

@shavedhead

Posted

@Nick-Gabe yea thanks for the feedback! I didn't realize until I upload it that the box in the middle had border-radius on all sides haha. I fixed it up though. Yea i'm going to try using grid on my next few challenges instead of flex box to get a better understanding. Thanks for the feedback!

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