Skip to content
Submitted over 2 years ago

Responsive Four Card Feature Section using HTML amd CSS Grid

Oluwatosin Abigail Daramola•630
@Heph-zibah
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

ok.

This is the second grid challenge I will do and the challenge I have from the first is the sae i second.

I guess it it is screen size but my cards look larger than the pictures given. I tried removing the paddings and margins but it is almost the same. I want suggestions on how I can improve on this.

Also, if there are documents or video on grid, I will love to have the links so I can learn more.

Grid is fun but technical.

I await your suggestions

Community feedback

  • Kent O'Sullivan•1,870
    @12KentosPosted over 2 years ago

    Hey @Heph-zibah

    Nice job completing this challenge! The reason the boxes in your solution are bigger than the ones in the given picture, is because you don't have a max-width or a set width on your .gen-style this makes them over responsive. if you throw in a max-width of 350 px or 21.875rem it will look like the image they gave in the example.

    As for a really good place to practice and learn more about grid I would suggest the following interactive site. I used it when I was refreshing my grid knowledge and found it extremally useful.

    css grid garden

    Another place I would suggest to learn more about grid is from Kevin Powell, he is a youtuber and has a lot of really good content on everything css related. Here is the link to the video he has on css grid.

    Kevin Powell

    Let me know if you have any other questions! Hope this was helpful.

    Marked as helpful
    0
    Oluwatosin Abigail Daramola•630
    @Heph-zibahPosted over 2 years ago

    @12Kentos

    Cool.

    I never imagined I will have to give it a width because I usually avoid giving fixed width. I'm definitely trying your suggestion out. I need the page to look less amateurish.

    Thank you for the links too. I'll sure check them.

    And yes, your suggestions are timely are helpful. Thank you for taking out time to review the codes

    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