FAQ Accordion Component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  • You should use the cursor: pointer property to indicate that the element is clickable.

  • Swapping the image can be done using CSS; leave the JavaScript for adding/removing classes.

  • The content should expand when clicking on the paragraph, not just the icon. Additionally, you can implement a design where the user sees a change when hovering over the paragraph. Also, consider adding hover styles for better user feedback, as shown in the "active-states.jpg" image.

  I hope you find it useful! 😄

  Happy coding!

  21

  Marked as helpful
• 

  P

  Daniel 🛸•44,830

  @danielmrz-dev

  Posted over 1 year ago

  Hello @ROHIT-130SE!

  About your background, here's what happened:

  • Instead of using @media (min-width: 600px), you used @media only screen and (max-width: 600px).

  Here's what you have to do:

  • Change this on the media queries:

  @media only screen and (min-width: 600px)
  body {
      background: url(/assets/images/background-pattern-desktop.svg) no-repeat;
      padding-top: 15px;
      background-size: contain;
      padding-bottom: 30px;
  }
  

  • And change the background pattern from desktop to mobile outside the media queries.

  This problem can happen when you start the project by its desktop version. I don't know if you did that, but I recommend always using the mobile first approach anyway. It's always easier to create a desktop version once the mobile one is finished. The other way around is frequently more difficult.

  I hope it helps!

  11

  Marked as helpful