Responsive 3column preview card component using flex and grid.

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  This looks good. Just a few things to take care over.

  In the HTML you need a <main> element so replace your wrapper div with that. You can only have one <h1>. On a real site you'd have one somewhere as this is only a small component. So make your card headers <h2> and add a hidden <h1> page title, that is made screen-reader only to maintain validity of the HTML.

  The CSS is good too. A few points. Avoid setting explicit widths and heights on containers. It may look ok with fixed content. But on the web content frequently changes, and then your layouts will break. You have a min-width: 100vw on the body. This is causing horizontal scrollbars when you have more content than will fit vertically. It's not needed, the body automatically takes up the full width of the screen. Removing it should fix the horizontal overflow.

  1

  ---

  

  Ibrahim Isa Jajere•130

  @mikib0Posted about 3 years ago

  @AlexKMarshall I fixed everything your said. Thank you for your feedback.

  0