FAQ Accordion using ReactJS

Community feedback

• 

  Alex•660

  @al3xbackPosted almost 3 years ago

  Hi Natasya,

  For the arrow icon, it would be better if set to middle :) The problem is in the heading which still inherits the user agent properties esp margin.

  We can try something like this:

  • step 1: make sure each heading doesnt have margin, let the parent(article) use padding.

  article {
     ...
     padding: 1rem 0;
  }
  article header h4 {
     ...
     margin: 0;
  }
  

  • step 2: slightly make the button in middle position.

  button {
     ...
     display: inline-flex;
     align-items: center;
  }
  

  Marked as helpful

  1

  ---

  

  Natasya•330

  @notanutPosted almost 3 years ago

  @al3xback hey we met again! 😁 thank you for such a compherensive explanation, I was new to front end development (until now!). I'm gonna fix them as soon as possible!

  0

  

  Alex•660

  @al3xbackPosted almost 3 years ago

  @notanut yeah I'm just curious about your other projects, so far so good. keep trying!

  0