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-Coloumn Card using flexbox and absolute positioning

Timic Ivey 300

@Lwmeek

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


If you know any better or faster way of centering the entire container in the body, please let me know. Any better best practices I should implement? Send me your GitHub so I can stay connected and check out some projects yall are working on. Would love to see some cool new stuff.

Community feedback

@RyukioMiyamoto

Posted

Great work overall, but I would like to comment on the button's hovered state, as it has a border property, while the regular button doesn't, which is causing your design to "jump" on hover, even though it's just 1px. An easy fix is to add the border to the btn class, rather than just btn:hover. Your html is also missing a <main> tag, which is an accessibility issue. Just wrap you div.container in it and you should be good.

Hope you find it helpful! Good coding.

Marked as helpful

1
José Luna 200

@phoenixrx

Posted

to center a container I use ".containerName { margin: 0 auto; } " I see your project and it doesnt have the interactive columns, check mine here: https://3-column-preview-card-component-rose.vercel.app/ my github profile is phoenixrx

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