3-column card component

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted about 4 years ago

  👋Hi Natnael Fanta Teffera! My name is Vanza!

  I have some feedback on this solution:

  • Don't use id for styling purposes, in this case it will increase the specificity with no reason. I recommend to use classes.
  • Try to write a your html in a consistent way, since right now is the ending div tag is not align correctly.
  • Also try to write a better scss, since right now, the indentation is just useless:

  #s-left  a:hover {
      text-align: center;
      width: 146px;
      height: 48px;
      border-radius: 20px;
     
      
          display: inline-block;
          padding: 10px;
          color:  white;
          border: 3px solid white;
          border-radius: 20px;
          background-color: #E28625;
          
  }
  

  • On :hover state you don't need to copy paste the existing style on the a, just add the style for the :hover state.
  • Try to use rem unit, because it will allow the user to control the size of your page based on their browser setting.
  • Try to add padding-right and padding-left on your body when the card is just one column to prevent the card touching the right and the left of the screen.
  • As you can see from the design comparison, the body background color should be grayish color.

  That's it! Hopefully this is helpful!

  Happy Coding!

  10
• 

  Natnael Fanta Teffera•110

  @nashee

  Posted about 4 years ago

  Thank you for the feed back, i have updated them now, but this comment is not clear "Try to add padding-right and padding-left on your body when the card is just one column to prevent the card touching the right and the left of the screen."

  00