Three cards layout using pure CSS and flexbox/grid

Community feedback

• 

  Alexander Morse•610

  @SakeranPosted over 2 years ago

  Hi Amaury, nice job on the project.

  On the topic of accessibility, I don't think there's much more you really need to do here. I was able to navigate the component easily enough using both my keyboard and a screen reader. The only a11y-ish issue I can think of is actually in the icons' alt text. In this particular case, my screen reader reads off "graphic, sedans car", which is a little redundant when the very next line is "heading level 1, sedans".

  Since the icon is mostly a decorative element that doesn't add to an AT-user's experience, in cases like this it's sufficient to just provide an empty alt attribute: <img alt="" src="..." />. This is just a minor optimization, though, and I don't see any other points of confusion where you would need to use ARIA to clarify the document structure.

  As for your CSS, it doesn't appear as if you had much trouble implementing most of the design. Your use of display: grid for centering the component definitely works, but note that the smallest width the "centered" cell will ever take on is 45rem, or 720px. Given that your first desktop breakpoint is 476px, this means that the component will overflow the screen's horizontal space on the 476px-720px range. The simplest fix here is to probably just increase the breakpoint to something like 768px instead.

  Additionally, it looks like you came up on the problem of how to size the component on very large screens, which would explain your additional breakpoint at the 1700px mark. If you'd like a little more control over how large the centered component (.cards-container) can grow, one thing you can do is set a max-width on it, for example max-width: 768px. If the component isn't centered within its grid cell after this, you can also set place-self: center on it. Alternatively, you could still go with the breakpoint at 1700px, and just use a fixed width, e.g grid-template-columns: 1fr 768px 1fr.

  Hope some of this was useful to you.

  Marked as helpful

  1

  ---

  

  Amaury Franssen•180

  @ExploryKodPosted over 2 years ago

  Hi @Sakeran, your comment is very useful and I thank you very much for it. I'll try your advices to adjust the card-container in screen between 476 and 720px and in big screen. You are right I didn't see I made a mistake in my breakpoints. On large screens, using max-width is a good idea and also changing grid-template-column and use a place-self to center.

  For accessibility, it is a great idea to use a real screen reader, we can see that some issues appear as the fact that it read redundant text. I'll fix this.

  have a good day and a happy coding !

  0