Skip to content
Submitted almost 4 years ago

HTML, CSS using Grid Layout

Luan de Beer•30
@Luandb
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I know the design is not exactly as the challenge requested but this design looks better for me. It was also easier for me to complete this challenge using CSS Grid compared to using the flex method. However, I would like some feedback regarding the flex method, as I do not fully understand it and maybe someone can assist me in how the flex method would make it easier to do this challenge.

Community feedback

  • Szymon Rojek•4,540
    @SzymonRojekPosted almost 4 years ago

    @Luandb

    Hi, I've just checked your RWD, a few tips for you:

    • mobiles: first box can get > margin so it will be a gap between text and the box (at the moment your hero is to close to the main content); check the footer (is too close to the last box, you can set a margin or padding);
    • IMO you can start from one column (mobiles), then for tablets set two rows (2 boxes each) and final desktop configuration with boxes).

    If you want to learn Flexbox and Grid, I can recommend really good courses for free created by an amazing author, which is Wes Bos:

    Greetings :D

    2
  • iMervinC•215
    @iMervinCPosted almost 4 years ago

    Try this website on mastering flexbox. It's pretty fun too.

    https://flexboxzombies.com/p/flexbox-zombies

    1
    Luan de Beer•30
    @LuandbPosted almost 4 years ago

    Awesome, thank you so much! I will have a look and see if I can update my solution using flexbox.

    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