Faq Accordion Card using flex

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted almost 3 years ago

  Hi @Sikootiponepone!

  To answer your question, some advice first: it's usually much simpler to start with the mobile design. By default, everything will already be in a column, so you'll need fewer lines of css to get the effect you want :)

  But as it is, let me talk you through what I think is happening in your solution on mobile. My approach is to open dev tools and check the styles there - definitely recommend playing with other people's solutions like this as well, you can learn so much through it!

  • First, we have quite a lot of empty space on the right hand side - I assumed it was the padding on .content class, but after unchecking that in dev tools, not a lot has changed. I see that you've got the width set to 70% in your media query, I can uncheck that as well, and the left margin.
  • Now I have the text and arrows centered, and right next to each other, which is not what we want here. If you follow what I'm doing here, you'll notice that some of your divs are not taking up full width of the container - that is because they're now flex items, so they only take up the space they need, no more. You could try to fix this with the flex property - but the truth is, you don't .content to be a flex container at all.
  • So these are the styles we are getting rid of for .card .content within the (max-width: 930px) media query:

   /* display: flex; */
      /* flex-direction: column; */
      /* align-items: center; */
      /* width: 70%; */
      /* margin-left: 12px; */
  

  • All we need to do now is add some padding on the sides so that the text doesn't go right to the edges of the card, and center the h1 :)

  Hope I explained my steps well, if you have any questions let me know!

  I also noticed that only one of the accordion is working, and they're not really accessible. This article helped me a lot with accessible accordions

  Try using querySelectorAll and forEach method in your script to apply the same logic to all your accordions :)

  0
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @Sikootiponepone. Congratulations on your solution to the challenge. I have studied your work and learned a lot from it. Here are some of my opinions on your work.

  • When accordion shows its content under questions, I think there could be some transition, like slideDown and slideUp in jQuery. It can be done in several ways.
  • About centering on mobile version, this could help you.

     margin: auto;
     text-align: left;
     display: block;
     width: 80%;
     padding: 0;}
  

  • And as you can see on overview report, there are some accessibility and HTML issues, and they are not good for semantic usage. For example lang attribute on HTML element must be "en" or so, not "utf-8".

  I hope my opinion can help you a bit. Happy coding ~

  0