FAQ Accordion with flexbox and JS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good work on this. Though I had problem inspecting your layout. When not inspecting, your layout is good in desktop the mobile state is good as well.

  Suggestions:

  1. Do not use height: 100% on the body tag. Since you are using 100% of the parent's height, which in this case, the viewport itself. So you are limiting the body's height. Try inspecting your layout from the bottom, you will see that you content is somehow cut off. Hover on your body element and you will see that the size of it is only half, because it is only limited to the remaining viewport's height. Please refrain from using any sizes from the viewport. Instead you can remove this, but the problem is that, it will have no dimension, because you set the whole accordion container, absolute which removes itself from the flow.

  1.1. Instead of position: absolute just make it static for the position. This way, it is back to the normal flow, remove the top property. But doing this, you will need to add padding to the top and bottom of the body tag, to prevent the accordion touching the ceiling and flooring. Maybe padding: 8rem 0, I tried it and works well, the box is aligned on it.

  2. This is very important, adding breakpoints. Resizing your layout cuts off the left and right side of the container which is not really ideal, causing scrollbar at the bottom.

  2.2. What you can do is that, in your container selector. Remove the min-width: 1000px and add width: 100% so that it scales when resizing from the sides. But still, the content inside it needs to be responsive on the size as well. I will leave that for you.

  3. On your mobile state, It will be awesome if you tweak the breakpoint at around 400px, since phone nowadays have higher ppi than 375px, so if they have higher than that, they cannot see the mobile view.

  4. Adding cursor: pointer on the accordion questions.

  But still, good work on this and if you need help about those, just drop it here okay^

  0

  ---

  

  Andy•40

  @cwus619Posted over 3 years ago

  @pikamart Hey, sorry, I've only just seen your comment this evening! Thanks a lot for the feedback, really appreciate it :)

  0