Skip to content
Submitted over 3 years ago

Mobile-first Responsive FAQ accordion card

Htein Linn•150
@hteinLinn210
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I have a serious issue with the desktop view. I can't position the images correctly and I don't know how to do that. So, I plan to update the repo with the solution. And also I will remove javascript and replace with pure CSS or bootstrap in future. Any feedback are warmly welcome.

Happy coding!

Code

Please log in to post a comment

Log in

Community feedback

  • bunee•2,020
    @buneeIsSlo

    Hi! @hteinLinn210, Good job on the challenge! You can fix the image by adding an overflow: hidden to the .container class.

    Also, you don't need CSS or JS to create the accordion. Just use the <details> and <summary> tags. Learn more about them here

    Hope this helps :)

    Marked as helpful
  • Francis•260
    @FrancisKhaledKhodja

    Hello. Nice job. Your javascript's script is very interresting. For th image position, you can use the background-position to move the picture in the box and to hide a portion of it. But the previous advice (bunee's advice) is very good.

    Marked as helpful

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