3-column-preview-card-component using HTML5 and CSS3.

Community feedback

• 

  madosy•180

  @madosyPosted over 1 year ago

  For the buttons, either change the box sizing to border box or have the border all the time and change the fill on hover. Right now, when I hover on the button, I see the height of the card changing and I think it's due to the border on hover.

  0

  ---

  

  vivekrajput@93•450

  @vivekrajput-93Posted over 1 year ago

  @madosy Thank you brother for feedback and Could you tell me how to change the button to the point where it doesn't effect the height of the card..and I tried (border-all) but its not working..please advice how to do it..

  0
• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. Just a few pointers

  • When using flexbox you don't need to add flex-direction: row; flexbox is by default set to row.
  • You add font-family to all three cards, you don't have to do this. If you add font-family to the body it will apply to the entire page. So no need to repeat that.

  /* set media to min-width */
  @media (min-width: 375px) {
  .container {
  flex-direction: column;
  max-width: 50rem;
  margin: 20px;
  }
  
  .first {
  /* border-top-right-radius: 10px;*/
  /*border-bottom-left-radius: 0;*/
  border-radius: 0 10px 0 10px; /* top-left, top-right, bottom-right, bottom-left */ 
  }
  
  .third {
  /* see the comments above on how to short write border-radius */
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  }
  }
  
  

  You need to fix something, when screen size goes under 375px it changes the card.

  0

  ---

  

  vivekrajput@93•450

  @vivekrajput-93Posted over 1 year ago

  @hitmorecode Thank you brother for feedback..First for font-family..it showing two diff font-family in the instruction...so I have to apply separately and I am grateful for flex-box advice I now am aware of that..Once thank you.

  0

  

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  @vivekrajput-93 glad I could help. You are right they used two different font-family. When working with two different font-family, is best to apply the font-family that's most used on the body and the others direct on the element itself.

  1