FAQ Accordion with HTML, CSS & a tiny bit of JS

Community feedback

• Account deleted

  Nice one completing the challenge, the box needs some positioning be in the right place. The picture in mobile view, is not exactly centered, it shifts places as you resize.

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hello there, livana! 👋

  Nice effort on this challenge! 👏

  I suggest,

  • Allowing the width of the card component to be determined by its content, not the width of the viewport. This will make it easier to make the design responsive and ensure that there isn't every too much space inside the card itself.
  • Putting the mobile illustration image inside the card component in your HTML and using absolute positioning to position it relative to the card itself. That'll make it easier to keep the card in the right place when the size of the card changes. That's what I did in my solution to this challenge, and I think it worked out fairly well. Perhaps take a look if you'd like some ideas. 🙂
  • Taking a look at your solution report and trying to clear up some of the errors that are there in order to improve the accessibility of your solution (since there seem to be quite a few errors, at the moment).

  By the way, you can use the native HTML <details> and <summary> elements to easily create a fairly accessible accordion without having to use any JS. If you’d like to learn more about those elements and how you can use them, check out this helpful article from MDN. Maybe something to try out in a future project! 😉

  Keep coding (and happy coding, too)! 😁

  0