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

Triple Column Preview Card

Saulius K.• 560

@TH3RIV

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


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

@ZenitsuAg

Posted

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

@TH3RIV

Posted

@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

@ZenitsuAg

Posted

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

0
Steven Portas• 440

@satrop

Posted

@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
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