Submitted over 2 years ago

FAQ Accordion card using only CSS

Emilie• 30

@emiliemorassi

Preview site View code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey guys ! First time submitting my work here ! So, I only used CSS for this one. Fun ride ! And I'm having difficulty positioning the box image and I usually don't have that kind of problem so I'm wondering if anyone could help me find out what I dit wrong here. It just doesn't get out of my head, I may need the Eureka moment/facepalm to let it go ^^ I tried different ways and none of them worked as I would want them to. It either moves when I resize the page and I want it fixed at that position (version that I kept), or, part of it disappears when it's supposed to get above the background. (Which I suppose is normal since it was placed partly outside of its container with an absolute position). Anyway, I would love some feedback on that and feel free to comment on the rest. Thanks a lot !

Community feedback

bunee• 2,060

@buneeIsSlo

Posted over 2 years ago

Hey! @emiliemorassi, Congrats on completing your first FEM challenge, you've done Amazing! The page responds very well.

Positioning elements absolutely, does get head scratching sometimes. I applied these fixes

.containerBox {
    position: relative;
}

.box {
    top: 40%;
    left: -95px;
}

Note: Theses fixes are not perfect, but does get the job done.

You can add an overflow-y: scroll; to the .content. This way the the .containerBox doesn't overflow when all the questions are opened.
Great job on writing semantic HTML. I'm currently working on this project myself and I wasn't aware of the details tag so, Thanks for teaching me somethin new.

Hope this helps :)

Marked as helpful

Emilie• 30

@emiliemorassi

Posted over 2 years ago

Aw thanks a lot @buneeIsSlo. I knew the positioning issue was gonna be easy to fix, but now that I see it, it seems super obvious...

Also, I didn't even check what it would look like with all the questions opened... So thanks for letting me know ! It's now fixed. Took the opportunity to style my scrollbar a little bit.

The <details> tag was also a discovery for me, so there you go ! Thanks again for the feedback :)

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