Responsive FAQ Accordian

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 3 years ago

  Hi there, Aakash Verma! 👋

  Good work on this challenge! 👍I like the transition that you added to the Q/As in the accordion! 😀

  It's been a while since you first asked me to give you some feedback for this solution (my bad) so might already know how to improve some things, but I'll give you a few tips for your consideration anyway. 😉

  I'd like to suggest,

  • Not adding margin to the body (and simply allowing it to fill up the entire width and height of the viewport). You can do this by adding min-height: 100vh to the body. This way, the gradient background will fill the entire area of the screen at all times (which I think looks really good).
  • Creating a wrapper element around the card (that is the same size as the card, no bigger or smaller) and making sure that the floating cube is absolutely positioned relative to that wrapper. That way, it should always look like the floating cube is positioned in the right place relative to the card itself, and it shouldn't move around so much when the page is resized. That's what I did in my solution to this challenge, and I think it worked out rather well.
  • Decreasing the overall size of the card (and the text inside it) when the layout first switches from desktop to mobile. I think things are a little too big when the switch first happens. 😅
  • Making sure that the accordion is keyboard-accessible. This is important so that people who don't use a mouse or trackpad can use the your site and the components in it. I would try using the native HTML details and summary elements to make accordion, but if you want to make the accordion from scratch, you can still do things like use the button element or the tabIndex and WAI-ARIA attributes to improve the accessibility of the accordion (although I wouldn't really recommend the latter so much as it's a lot more work and mistake-prone).

  Hope those couple of tips help. 🙂

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  1