Submitted almost 4 years ago

FAQ Accordion card using only CSS

@emiliemorassi

A solution to the FAQ accordion card challenge

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 !

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

bunee•2,020
@buneeIsSlo
Posted almost 4 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

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