Four card feature section Html/Css

Community feedback

• 

  Emeke Nkadi•65

  @EmekeNPosted about 4 years ago

  Great job on recreating the design!

  To get a little bit closer to the design I would suggest these changes to your css.

  .box {
       padding: 20px 20px;
      background-color: #fff;
      box-shadow: 0px 17px 18px -5px rgba(194,190,194,1);
      min-height: 235px;  /* this will give the box a better display height */
      display: flex; /* this will allow the box's child elements to take up the full space of the box*/
      flex-direction: column; 
  }
  
  .box img {
      height: 40px;
      width: 40px;
      /*DO NOT USE FLOAT, this is really only for getting text to wrap around an image*/ 
      /* float: right; */
      /*Below will get the behavior you want for the images */
      margin-top: auto;
      align-self: flex-end; 
  }
  

  0

  ---

  

  Dark-Lover•735

  @Dark-LoverPosted about 4 years ago

  @EmekeN

  Thank you Emeken for the feedback, you are right, i shouldn't use float. iv fixed the css.

  0