Skip to content
Submitted 5 months ago

Meet landing page

Dom Leverment•120
@DomLeverment
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I found this really challenging in deciding when to use grid and when to use flex

What challenges did you encounter, and how did you overcome them?

Mental blocks on all fronts with this one, found it really challenging and i am a little rusty.

What specific areas of your project would you like help with?

i didn't write any media queries in the end. If someone can suggest what i could do i'd be grateful.

Community feedback

  • Hexerse•460
    @HexersePosted 5 months ago

    Hello, I too am struggling with this one. But some insights I can give is

    1. Use Rem instead of Px. It adapts to the screens better

    2. Display flex has a function flex: 1. Which acts like grid where 1 in flex = 1fr in grid. U won't need to depend on using static numbers for some of your sizing as the flex will already do it for you

    3. In my own opinion, usually I use grid to help layout my items I use grid-template-rows and grid-template-columns combined with grid-template-areas. To create the layout. Then use grid-area to assign the layout to my divs. For the smallers things usually I will use flex. As flex allows me to shift things within the box easier when it only has one dimension. E.g When all the elements are in a row. Or column format WITHIN the div.

    Watch Kevin Powell and Slaying the dragon to know when to use grid and flex.

    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