Responsive FAQ accordion card using Flexbox

Community feedback

• 

  Shahin NJ•1,190

  @SJ-Nosrat

  Posted almost 4 years ago

  Hi Anna, Wonderful solution! I've looked at your CSS and noticed the following;

  1. On the .faq-text class; you can change the overflow-y: auto; to overflow-y: hidden; that'll get rid of the scroll when you open the accordian.
  2. With regards to positioning the box; you can remove the transform property and add: top: 8.85rem; and left: -7rem; that should place the box nicely giving the shadow effect. Or as you've used transform with the following values: transform: translateX(-62%) translateY(35%); either approach is perfectly fine; that's the beauty of coding.

  With regards to negative values, MDN documentation mentions the following for top: A negative, null, or positive <length> so it's perfectly fine to use negative values.

  Once again well done! Looking forward to your other solutions!

  Keep on coding and best of luck with your coding journey!

  11

  Marked as helpful
• 

  bunee•2,020

  @buneeIsSlo

  Posted almost 4 years ago

  Hey @Anna60991, Your page looks great and is completely responsive, Great job!

  However, I did notice a bug. you can experience this by clicking right under any of the questions. doing this reveals the answers of every question and gets quite tricky to toggle them back off. I think the reason behind this is the event listener on the li tag, If this is the case... I think adding the event listener to the div with the class of question should solve this issue.

  Hope this helps :)

  11

  Marked as helpful