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 using flexbox

Duyen Nguyen• 950

@Duyen-codes

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 spent 2 days for completing this challenge. One thing remained unsolved is on mobile version, the background pattern does not look exactly same as the original design. I am self teaching web development so I would be really grateful for any code reviews and feedback from you all! Any help greatly appreciated!

Community feedback

Account Deleted

I had the same issue with the background, the way I found to fix it was to set min-height to 100vh on the general styles for the body (before any media query). Don't know if it's the ideal solution but it worked for me.

Marked as helpful

0

Duyen Nguyen• 950

@Duyen-codes

Posted

@RyukioMiyamoto I see! Thanks for sharing! I really appreciate it. I'll definitely keep that in mind.

0
Eles• 1,300

@eleswastaken

Posted

There are two types of paths relative and absolute. In your solution you can't see images, try adding a dot in front of every path to files.

Don't set fixed heights to containers. When you open several answers, it overflows. So instead just use paddings and margins. For example, you could setmax-width to your container and margin: 50px auto 0 to "center" it.

For question-answers you should use <details> and <summary>, Link.

Marked as helpful

0

Duyen Nguyen• 950

@Duyen-codes

Posted

@eleswastaken Thanks very much for your feedback! I'll work on this again later applying your suggestions!

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