Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion Card using CSS Grid

@rontoyhacao

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, this is what I came up with the challenge. I used css grid and I had a hard time figuring out how to center the image in responsive design. I would love to know the solution if you guys know how. This is all I've got and any feedback is greatly appreciated. :))

Community feedback

T
Matt Studdert 13,611

@mattstuddert

Posted

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

@rontoyhacao

Posted

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

0
T
Matt Studdert 13,611

@mattstuddert

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord