CSS Grid cards with SASS and BEM

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Heyo,

  The desktop view looks great! The rest is also not far off. What I'd suggest:

  1. Adding a small inline margin to your container in mobile view, so the cards don't touch the side of the screen.

  2. The media query is a bit off, you'd need a bigger width than 576px. You could increase this and perhaps put a max-width on the container so the cards don't stretch out too much before it hits the bigger breakpoint.

  3. I assume you added a h1 because you had an accessibility issue in the report. What you could do is to give your solution an appropriate title that describes it better ("Testimonials" would be a good idea) and then hide it visually. You could do so by adding a screen-reader only class to it, like this:

  .sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  }
  

  This is a nice code snippet I tend to reuse a lot when I want an element to be only available to screen readers ^^

  Marked as helpful

  2

  ---

  

  P

  Zsofia Dalnoki-Papp•210

  @dalnokiPosted over 2 years ago

  hey @FluffyKas,

  thanks for the super useful comment, I applied all the mentioned suggestions - this snippet is a lifesaver! :)

  0