Skip to content
Submitted about 2 years ago

Triple Column Preview Card

Saulius K.•560
@TH3RIV
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

This went pretty well, but yet again I ran into a centering problem and had to use margin to sort of center my containers. How does one make the main section not stick to the top of the page? Thanks.

Community feedback

  • Lord Robins•550
    @ZenitsuAgPosted about 2 years ago

    Hello Saulius, your work looks great!! As for the centering issue, all you have to is add

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

    and that's it.

    Marked as helpful
    0
    Saulius K.•560
    @TH3RIVPosted about 2 years ago

    @ZenitsuAg Thanks for your input!!! After playing around with display properties and looking at MDN I managed to figure it out. I went with the grid option, but what I was doing is centering everything in the main element and not the body element.

    0
    Lord Robins•550
    @ZenitsuAgPosted about 2 years ago

    @TH3RIV Same here, I did the same thing initially 😂😂

    0
    Steven Portas•440
    @satropPosted almost 2 years ago

    @ZenitsuAg You can make that even smaller and do…

    body {
  display: flex;
  place-items: center;
}
    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