Submitted over 3 years ago

FAQ Accordion Card with flexbox and flexible units of measurement

Daniel Castro• 70

@danielscastro

Preview site View code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello guys, I would really appreciate some feedback on this little project. No need to be nice or anything, I would like sincere criticism.

As of a question, I would like to ask how could I have positioned the orange block on the desktop version better. I struggled to make him follow the little shadow on the main image. Also, I went a little hacky to make the accordions in JS, so it would be nice if you could help me find a better way to do it. Tried some different things but couldn't make them work (even the w3s model).

Community feedback

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

Hey, good job, Daniel Castro!

Your solution looks good and is responsive! 👏

I'd suggest perhaps using absolute positioning to place that cube image (which I see you did) relative to the card, but with explicit distance values for the bottom and left properties (not vh or vw units, because they cause the cube to move all around when the page is resized).

I'm still working on this challenge myself, so I might not be able to give you any specific feedback on your JS just yet, but I can say your accordion looks and works well. 👍

Keep coding (and happy coding, too)! 😁

Daniel Castro• 70

@danielscastro

Posted over 3 years ago

@ApplePieGiraffe Hey, thanks for the feedback! I did tried to use explicit values, but couldn't nail exactly the feel I wanted. Gotta keep trying and learning techniques for these kinds of situations. Anyway, thanks again for the response!

Happy coding!

Please log in to post a comment

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