Skip to content
Submitted about 5 years ago

Four Card Feature Section

Vinit Gupta•20
@thevinitgupta
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I faced a problem that I was not able to fix. The two cards on the side were not placed as mentioned in the problem. Can you help me find the problem?

Code

Please log in to post a comment

Log in

Community feedback

  • Leshy•580
    @LeshyNL

    Hi Vinit Gupta,

    The issue is that your card section is 100% of the width of the screen and each column is 33% of the width of that. With the cards being centered in each column, that means that they will move far apart as the columns get wider.

    You can fix your approach of using three columns set to display: inline-block by removing the width declarations on the columns, and setting text-align: center on the card section div. You will then need to add some margins to your cards to ensure that there is some space between them.

    However, you will notice that the layout breaks as you go to smaller layouts, and have to do more work to fix it for those. What you will want to do for this challenge, is look into CSS layout techniques, such as Flexbox.

    It will take a bit of learning and practicing to become really good with it, but it will make this challenge quite easy. See for more information https://css-tricks.com/snippets/css/a-guide-to-flexbox/. Once you have a bit of an idea how it works, https://flexboxfroggy.com is a fun way of practicing with it.

    It's a very good first attempt though, so keep going! :)

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