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

FAQ accordion card

Andrei Minciuna• 40

@AndreiM987

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had a problem while solving this challenge. First time I clicked the content does not appear, but the second time it worked. I solve this adding inline css property: "display: none" for the content that should not be visible. I don't now if is correct but now it works. Any suggestions ?

Community feedback

Anthony• 355

@ACdev27

Posted

I see one issue I had myself. In mobile view, if you open more than 3 of the question/answers at same time, the top image gets pushed off screen at top of page. In my case I had to change the flex box settings flex box alignment settings I used in desktop view, for the mobile view.

Marked as helpful

0

Andrei Minciuna• 40

@AndreiM987

Posted

@ACdev27 Thank you for feedback! Do you now how can i fix this issue?

0
Anthony• 355

@ACdev27

Posted

@AndreiM987 In my case I had used flex box for one of my "main" containers. In mobile view, where I changed flex-direction to column, I also changed justify-content and align-items to flex-start.

Also for my card container I gave it a margin of 148px.

For your code specifically, you can try something similar. This seemed to work:

on your body tag align-items: flex-start;

.container margin-top: 150px

Marked as helpful

0
Andrei Minciuna• 40

@AndreiM987

Posted

@ACdev27 I added on body tag align-items: flex-start; and .container margin-top: 150px and it works. Also i added min-height: 100vh; on body to show correct background when i open more than 3 of the question. Thank you a lot for your help!

0
Anthony• 355

@ACdev27

Posted

@AndreiM987 Yes, it is looking very good! Glad I could help.

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