Responsive 3-column card: Mobile First, Flexbox, and Custom Properties

Community feedback

• 

  Pablo Montoya Varela•300

  @PaliTriesToDesignPosted over 2 years ago

  Hello! This solution looks great.

  I would just point out one small thing that I learned from Coder Coder on YouTube. On your section-body-text class you are using both top an bottom margins. According to Coder Coder, it would be better if you get used to adding either margin-top or margin-bottom to your elements but not both. From my pov, it is better adding margin-bottom to each element. i.e:

  .section-icon {
       margin-bottom: 2rem;
       ...
  }
  
  .section-heading {
       margin-bottom: 2rem;
       ...
  }
  
  .section-body-text {
       margin-bottom: 2rem;
       ...
  }
  

  Marked as helpful

  1

  ---

  

  Brian Yeadon•70

  @brianyeadonPosted over 2 years ago

  @PaliTriesToDesign Hi Pablo and thanks for the feedback!

  I used your suggestion to refactor the CSS for my 3-column preview card component solution, the NFT preview card component challenge I was working on and will use it on all my future solutions. I went with margin-bottom as it seemed to make the most sense.

  I do like the simplicity and consistency of this approach.

  Thanks again for taking the time to give me feedback!

  1