Submitted almost 3 years ago

FAQ Card - React, CSS

Evan Reznicek• 70

@evanRez

Preview site View code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Very grateful for the feedback I received! I plan to scale the size up closer to the original at some point in the future

Community feedback

Kim Song• 205

@CaptKraken

Posted almost 3 years ago

hey good news! i think i found the problem. it's the class bgWrap. it kinda covers the whole card. adding visibility: hidden; to it should fix the problem.

@media screen and (max-width: 768px)
.bgWrap {
    visibility: hidden;
    overflow: hidden;
}

Patrick• 14,325

@palgramming

Posted almost 3 years ago

@CaptKraken glad you figured it out. Great Job ⭐⭐⭐⭐⭐

Evan Reznicek• 70

@evanRez

Posted almost 3 years ago

@CaptKraken Ah, that makes sense. I made a quick fix to try and get rid of the background overflow right before pushing, didn't realize that wrapper I made had side-effects. Thanks a lot for the quick fix!

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted almost 3 years ago

Greetings, Evan Reznicek! 👋

Well done on this challenge! 👍 Your solution looks pretty good and the accordion card works rather well (just probably remember to include the fix for the mobile layout suggested by CaptKraken)! 😀

The only thing I would suggest is to increase the overall size of the accordion card and the text inside it (since it seems a bit small and may not be so easy to read for some, at the moment).

Keep coding (and happy coding, too)! 😁

Evan Reznicek• 70

@evanRez

Posted almost 3 years ago

@ApplePieGiraffe, thanks for the feedback. I'lll have to add the size discrepancy to my "continued development" section for this one. I work on an 11inch screen so maybe thats why I thought the pixel size for the card looked more appropriate when initially rendering? But truth be told I just picked a size at random when creating the card div and just worked around it. I'll try and avoid that type of thing next time!

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