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
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


Any questions or comments do not hesitate to write me, I would appreciate your advice about this design

Community feedback

P
Remus D. Buhaianuβ€’ 3,145

@Miculino

Posted

Congrats on completing the challenge, @PitagoraStrike!

I had a look at your final solution and Github repo. Here are a few suggestions that might help:

  • On larger screen sizes, there's a bit too much space at the top

  • Responsiveness needs a bit of polishing - you have horizontal scrolling on smaller screen sizes

  • Don't use fixed width and height, especially not with the px unit

  • You've used a lot of absolute positioning, which is really not needed in this case. You can build simple, modern, and efficient layouts and position your elements properly using Flexbox or CSS grid

Marked as helpful

0

darryncodesβ€’ 6,430

@darryncodes

Posted

Hi Victor,

Good solution, nice work!

A few minor bits of feedback for you:

  • it might be cool to add some border-radius to your design to match the challenge
  • you could add transition: ease .3s; to your buttons to make the hover affect smoother
  • it's best practice to avoid setting fixed heights and widths for responsive design, the content usually dictates this. i'd recommend looking into this further. this is a really good free course

Keep up the hardwork!

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