3 Column preview card component

Community feedback

• 

  Benjo Quilario•1,810

  @benjoquilarioPosted almost 3 years ago

  Hey @Alexinzunzav Great job on finishing this one, It looks good

  Some suggestion:

  • Remove the height: 100vh or just add the min-height: 100vh on the body tag. Because this will only limit the body to have a height 100% of the remaining viewport or screen.
  • Also avoid using width: 100vw in a big container like body or main. Because it will only add a horizontal scroll bar.
  • Also must add the cursor: pointer on button, to inform the user that this is clickable and not just for design.
  • Invalid property on * selector border: border-box; box-sizing instead

  Aside from those everything is good, keep coding and happy coding too!

  Marked as helpful

  1

  ---

  

  Alex Inzunza•80

  @alexinzunzaPosted almost 3 years ago

  @benjoquilario Hi Benjo, thanks for your comments! do you suggest that i have to use width: 100%; and height: 100%; instead?

  0

  

  Benjo Quilario•1,810

  @benjoquilarioPosted almost 3 years ago

  @Alexinzunzav width:100% and min-height: 100vh instead, so that the element will expand if it needs to

  Marked as helpful

  0
• Account deleted

  Good work, I only see that in tablet mode it cuts out. all three columns must start in width: 950 px

  Marked as helpful

  1

  ---

  

  Alex Inzunza•80

  @alexinzunzaPosted almost 3 years ago

  @vane-mp thanks for you comment Vanessa! i didn't made a media quiery for tablet size :/
  In cases like this do you recomend work with media queries or make a fluid design with responsible grid using for example `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr) or something like that?

  i'll keep tuned to your comments!

  0