Skip to content
Submitted about 3 years ago

FAQ Accordion card using only CSS

Emilie•30
@emiliemorassi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

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,020
    @buneeIsSloPosted about 3 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
    1
    Emilie•30
    @emiliemorassiPosted about 3 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 :)

    1

Please log in to post a comment

Log in with GitHub

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