Responsive 3 Column Preview Cards Using FlexBox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hello

  Most of those errors will go away if you wrap the component in one <main> element ☺

  I also recommend

  • adding aria-hidden true focusable false to those svgs
  • changing heading level to h2
  • changing buttons to anchor tags (they are for navigation)
  • using mix blend mode screen on the buttons to get the text color to be the same as background, (still changing to white on hover as you have)
  • adjusting the spacing a bit on desktop to get closer to the design (mainly space at the bottom of cards looks larger than it should be)

  Good luck

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Looking at css, you shouldnt need any heights on the cards or component. Let the height be discated by content.

  I also advise against doing percentage widths only. You'd be better using max-width in px/rem in combination with width 100% or flex basis percentages to get a truly responsive solution that behaves predictably at all screen sizes

  0