Submitted almost 4 years ago

Responsive FAQ accordion card using Pure CSS

@DaoudAnas13

A solution to the FAQ accordion card challenge

Solution retrospective

I tried using only CSS in this one without JS .. all in all, it's an acceptable outcome but with minor issues that i hope to fix with your help

1 - Weird automatic scroll to the bottom of the page when clicking on the question ( tried preventDefault with JS didn't work )

2 - Background image moving when resizing the screen

3 - The image is also moving

If you find any other problem to mention or tips to give please let me know :D

Code

Please log in to post a comment

Community feedback

Abhineet Kandele•320
@abhineetkandele
Posted almost 4 years ago
Nicely done!!

Few comments from my end.
- Background image is covering a lot of area even on desktop view.
- When clicking a question, the whole card is sticking to the top of the page.
- Font can be imported directly inside the CSS file.
- And I would definitely recommend checking the accessibility issues in the report.
You could check out my solution using the below link. https://github.com/abhineetkandele/Frontend-Mentor-FAQ-Accordion-Card

It's not very great but I hope it may help.

In case, you feel something can be improved. Please do let me know.

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