Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-first FAQ accordion card with HTML & CSS/SCSS without any JS

#bem#sass/scss

@GrzywN

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback is welcome here!

Community feedback

John Mirage 1,610

@john-mirage

Posted

Hello, good job

  • At 968px screen width, the card overflow which make scrollbars appear.
  • You also can add padding in top and bottom of the card, so if the user has a device with not a lot of height the card can have more space.
  • Animation is great, you can maybe improve it a bit by putting the animated block in a div which have overflow: hidden so the text will not overlap the question text

Marked as helpful

1

@shashreesamuel

Posted

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think that the card is supposed to have a subtle box-shadow using box-shadow

I hope this helps

Cheers Happy coding 👍

Marked as helpful

0
CyrusKabir 1,885

@CyrusKabir

Posted

Hello my dear friend ♥ you did awesome job on this especially using just pure css and I just want say you probably forgot about adding that text color transition on .faq__accordion-question

Marked as helpful

0

@GrzywN

Posted

@CyrusKabir Oh, right I forgot about it 😅 Thank you so much, it's working with hover now.

1
CyrusKabir 1,885

@CyrusKabir

Posted

@GrzywN your welcome ☻ edit : In your profile, you have two code pen link one with code pen icon and another one with twitch (I did this mistake too fields were so close !)

1

@GrzywN

Posted

Almost everything fixed, thank you for your help :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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