3 column preview card component

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, perhaps you could consider looking into using relative units (em, rem, etc) instead of pixels for your next project, but other than that your solution looks really very good! Good job!

  Marked as helpful

  0

  ---

  

  Chloe gabriel•40

  @chloeGabrielPosted about 3 years ago

  @FluffyKas thank you! Is it bad to use px instead of the other units you mentioned?

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  @chloeGabriel Relative units vs pixels is a big topic. But to try to sum it up, using relative units is preferred for two main reasons (at least, to my understanding):

  1. Relative units just make responsive design easier than hardcoding with pixels for every screen-size. Using units, like vh, vw, em, %, etc just saves you a bunch of code.

  2. Accessibility issues. Some users like to increase the browser's default font-size to make text easier to read. If you're using pixels, these users will not be able to resize things. On the other hand, relative units change depending on the screen size and on the font-size set in the user's browser.

  As to what units to use instead, that depends on what you're trying to set, font-size, padding, width, etc. And of course, a few things can still be set in pixels but yeah, generally it's best to avoid it. Try to do some research, it's a fun topic ^^

  Marked as helpful

  0

  

  Chloe gabriel•40

  @chloeGabrielPosted about 3 years ago

  @FluffyKas oh okay I see. Thank you very much for your advice 🥳 which help me a lot. I'm reading an article about what you said to get more information about the topic.

  Have a good day !

  1
• 

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  Hi Chloe,

  The solution looks great - well done!

  • you could try transition: ease-in .3s; cursor: pointer; on your <button> styles. This will make the hover affect feel smoother and the button feel more like a button on desktop
  • align-items: flex-start; is not having any affect on your .card class
  • you could have used a few less div's in my opinion but not a deal breaker

  All the best!

  0

  ---

  

  Chloe gabriel•40

  @chloeGabrielPosted about 3 years ago

  @darryncodes thank you! I'll change the hover button with the transition, you're right.

  0