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

Joe Sexton 250

@Joesexton9789

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


Trying my best to make it responsive at multiple screen sizes. Let me know how I did.

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello, Joe!

Very nice project! It looks great!

I have a quick tip for you!

You can place your card in the middle of the page by doing this:

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;    
}

If you do that, you don't need to use margin-top to place your card in the middle! It's simple and helps a lot. I hope it's useful!

Other than that, great job!

Marked as helpful

1

P

@Islandstone89

Posted

@danielmrz-dev Since the body has 2 children (main and footer), it also needs a flex-direction: column, as we don't want the children to be side by side (default value of flex-directon is row). So, it might be a good habit to include that one as well, even if the Flex container only have 1 child.

I would also add that height should be min-height. This allows the body to grow vertically beyond the viewport, if needed.

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