FAQ accordion card using HTML, CSS and Vanilla JS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, nice job, Favour Christopher! 🙌

  Your solution looks good and is responsive! 👍

  That was an interesting choice to make the background of the side of the accordion card with the FAQs slightly transparent so that you can still see the background image behind it when the page is resized. I never really thought of that!

  Keep coding (and happy coding, too)! 😁

  0

  ---

  

  Favour Christopher•90

  @phaevourkhrisPosted about 4 years ago

  @ApplePieGiraffe Hi, Thanks for the feedback.

  But i need help finding a solution, In mobile view, when the screen width is less than 375px (which is the min-width I specified), the body becomes kind of smaller in width than the container (i.e the container overflows the body). Check this out and see if you can tell why.

  Do you know a solution around this? I'd appreciate!

  0

  

  Favour Christopher•90

  @phaevourkhrisPosted about 4 years ago

  @ApplePieGiraffe Hi, Thanks for the feedback.

  But i need help finding a solution, In mobile view, when the screen width is less than 375px (which is the min-width I specified), the body becomes kind of smaller in width than the container (i.e the container overflows the body). Check this out and see if you can tell why.

  Do you know a solution around this? I'd appreciate!

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @phaevourkhris

  It looks like you've set a min-width on the main container. Getting rid of that in the mobile layout should allow your container to decrease in width with the screen. 😉

  0

  

  Favour Christopher•90

  @phaevourkhrisPosted about 4 years ago

  @ApplePieGiraffe

  Yeah, i figured, but then how else do i stop the main container from shrinking beyond 375px (if i get rid of the min-width that is)?

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @phaevourkhris

  It might be better to allow the component to shrink below 375px as long as it only does so when the screen size is smaller than 375px. That way, users on phones with narrow screen widths will be able to see the entire component (and not have to horizontally scroll or anything).

  👍

  2