FlexBox - FAQ accordion

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, really great work on this one. The layout both desktop and mobile is really good and the responsiveness is great as well. Well done on this one.

  Regarding css, my only advise is to adopt a certain ruling, on how you structure selectors. Therefore, learn about bem methodology. Search for it, use scss, you will love it.

  Some suggestions would be:

  • On the body tag, remove the overflow: scroll you don't really need it based on your structuring.
  • The alt text for the img of the illlustration could be left empty alt="", since it is just a vector image, a decoration, better to leave it empty.
  • On the questions, you might notice that if lots are selected, the whole container gets resized. Some might be fine with it, but I think it should not be like that. What we could do is that, we will limit the .questions height and we will add a scroll on that container. That way, even if lots are selected, the whole container will not resized.

  .questions {
    max-height: maybe about 300px for desktop?;
    overflow-y: scroll;
  }
  

  Now doing that, the container won't resize, but there will appear a scrollbar right, you can style that or you can remove it. If you want to remove that but keep the functionality. You'll add these lines:

  .questions::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .questions{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  

  That is from w3schools.

  • Adding also a cursor: pointer to the details element would be really great. Just apply it on desktop view, we don't need it for mobile.
  • On mobile state, maybe add some padding to the top of the body. The img is touching the ceiling of the screen.

  Your html is great on this, also what I said about the max-height that is preference, you don't need to implement that, if you just like. Other than those, really great work.

  Marked as helpful

  1

  ---

  

  Juan Zapien•95

  @1ZapienPosted about 3 years ago

  @pikamart

  Hello Raymart, I really appreciate the feedback. I was looking at how to fix the questions expanding the card and what you suggested was perfect. Thanks. I was lost on how to approach it. Adding the pointer was also a great, it makes it a lot more clear that the questions are clickable. I decided to keep the scroll bar for now since it will show others that the section is scrollable. Also I looked into BEM and used it in my most recent challenge. It helped me structure and organize my code a lot better.

  Thanks again.

  1