Four Card Feature Section

Community feedback

• 

  Leshy•580

  @LeshyNLPosted over 4 years ago

  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! :)

  1