Responsive FAQ accordion for frontend mentor

Community feedback

• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted 11 months ago

  @khalid225 congrats on completing this solution🎉🎉

  You've tried really well. But you can make it better.

  • the body element get's some default styling which is implemented differently by different browsers. You should always get rid of them first and then start your own styling. And for that you can use some css resets. Because of those default styling of the body the container-body has shrunk a little bit and to fix that just do this

  body {
  margin: 0;
  padding: 0;
  }
  

  • Also remove .accordion-body { width: 80%} and img { width: 100% /* by default it's always 100%*/}. And on the accordion remove the width of 50% and apply this.

  
  /* for mobile screens */
  .accordion {
  max-width: 45rem;
  margin: 1rem;
  }
  /* for desktop */
  @media(min-width: 45em) {
    .accordion {
     margin: auto;
   }
  }
  

  • I'd recommend you to use rems instead of pixels. And if you want to know why Here's an article deep diving into this topic. Stop Using Pixels!

  I hope you found this helpful👍👍

  Keep up the good work and have a very nice day🙂😄

  Marked as helpful

  0

  ---

  

  ABDULFATAI ADISA•20

  @khalid225Posted 11 months ago

  @ratul0407 Thank you for pointing these out they are really helpful

  0

  

  Rajaul Islam Ratul•1,250

  @ratul0407Posted 11 months ago

  @khalid225 you're welcome😄

  0