Skip to content
Submitted over 2 years ago

3-Coloumn Card using flexbox and absolute positioning

Timic Ivey•300
@Lwmeek
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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

  • Roberto Yukio Miyamoto Arita•320
    @RyukioMiyamotoPosted over 2 years ago

    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
    @phoenixrxPosted over 2 years ago

    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

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