FAQ Accordion Card using CSS Grid

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  You've done an excellent job on this challenge! To get the image centred horizontally on mobile, you can add left: 50%; transform: translateX(-50%); to the .box element. The left: 50%; will make it so the element's left edge is halfway along inside the container. The transform: translateX(-50%); declaration will pull it back by 50% of its own width to perfectly centre it.

  One big thing I'd recommend looking into would be to make the accordion accessible. At the moment, you've got the click listener on the accordion-item-header elements, which are div elements. This makes the answers inaccessible to anyone not using a mouse/trackpad because div elements aren't interactive by default. I'd recommend using interactive elements, like button or a elements, for click listeners as they can be accessed by people using keyboards or other assistive technologies to navigate the page.

  I hope this helps. Let me know if you have any questions!

  1

  ---

  

  Ron Paolo Toyhacao•165

  @rontoyhacaoPosted almost 4 years ago

  @mattstuddert thank you so much it worked! i'll take note of that. :))

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  @rontoyhacao you're welcome! Yeah, it's a nice trick to remember 🙌

  1