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

Pure CSS FAQ Accordion

folake 230

@thefolake

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

It is well done although the image is cut off when making the responsive. What I did to solve this problem in your design is to add the following attributes to the following classes (Please note that these rules are for mobile screen size).

To .img-container

top: -13em;
position: absolute;
height: 75%;
left: 4em;

A .holder

position: relative;

A .faq-container

position: relative;
top: 6em;

Obviously you can do better but play with the measures and you will get the expected final result. I hope I helped you. Good luck.

Marked as helpful

0

folake 230

@thefolake

Posted

@Sdann26 Thank you so much! I had issues with that image thing on mobile. This helped a lot. Thank you so much I have made adjustments now. Can you take a look now please?

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