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 Preview Column Solution

@Kevo760

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


Hello fellow coders! I have been doing a few projects and decided to test my CSS skills and sharpen them in the process. This project took me about a day to complete. Please send any feedback my way, good or bad! I appreciate all of you and happy coding!

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hey, your solution looks good!

  1. As it was suggested above already, some transitions would be cool on the buttons!

  2. Adding overflow: hidden would hide (hehe) the problem, but it's nice to think about why there's an overflow in the first place! You use a fixed height and width on your body/html, I believe that's the origin of the problem. It's usually not a great idea to use fixed widths and heights. Giving your body a width is unnecessary here, and instead of height, giving it a min-height of 100vh would be probably a better idea!

  3. You could also try to center your component with grid or flex, whichever you prefer :)

Good luck!

1
Dušan Lukić 1,660

@dusanlukic404

Posted

Hey Kevin, I have a few suggestions for you:

  • Buttons should be aligned left and I recommend you to add some transition to them
  • You can't have heading element inside a span tag so check accessibility and HTML issues to learn more about it
  • Add overflow hidden to body to avoid horizontal and vertical scrollbar
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