Responsive four-cards-features

Community feedback

• 

  Dreamleaf•230

  @DreamleafPosted 11 months ago

  Great job, just a small note about using css shorthand when declaring things.

  A good example is on your cards where you specify values for padding and use: padding-top:30px; padding-bottom:30px; padding-left:30px; padding-right:30px;

  If they are all the same you can simply use: padding:30px;

  If you wanted the same top and bottom and a different value (but the same) for left and right you could: padding: 30px 10px; The first value refers to top and bottom, second value is left and right.

  If all sides wanted different padding, you can: padding: 30px 20px 10px 5px The order here is important and good practice to understand it. The first is TOP The second is RIGHT The third is BOTTOM The fourth is LEFT
  So, padding: top right bottom left;

  There is also a way to specify different top and bottom, and have the same left and right. padding: top leftANDright bottom; which is padding: 30px 10px 60px.

  Hope that helps, it can be used for other attributes such as margin as well, much quicker to write and keeps it all easy to read.

  0