Submitted 11 months ago

Responsive landing page using Flexbox

vuson1709• 120

@vuson1709

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I have problem with height. For other projects, I remember I don't set height for flex's container because I thought the flex container will take up all width and height of the page (not flex items). But for projects on Frontend Mentor, I have to set height of flex container height:100vh;

.container { height: 100vh; /*I don't know that I have to set this so that my flex can be in the middle of page*/ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

Community feedback

gfunk77• 1,200

@gfunk77

Posted 11 months ago

Nice job on your solution. The layout looks really nice. I’d suggest the following relating to your comment about height:

your content sits inside your <main> </main> so that is where you want your min-height: 100vh Adding flex to main will position your .container in the center.
Adding flex to .container manipulates all the divs inside of it. The height of the container will adjust depending on the content inside of the container. If you set a fixed height on things, you eliminate some responsiveness. If your container does not have the height you want, try adjusting the margins in between the content to see if that helps.

I hope this helps. Your 3 card layout looks really great. Congratulations on the challenge.

Marked as helpful

Please log in to post a comment

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