@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!
@rontoyhacao
Posted
@mattstuddert thank you so much it worked! i'll take note of that. :))
@mattstuddert
Posted
@rontoyhacao you're welcome! Yeah, it's a nice trick to remember 🙌