Skip to content
Submitted about 1 year ago

Responsive landing page using Flexbox

vuson1709•120
@vuson1709
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

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
    @gfunk77Posted about 1 year 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
    1

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