FAQ accordion card

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Great job on your work. In terms of layout, spot on, points for that.

  My only suggestion would be that, right now I can select multiple question and it displays the answer right, but, upon doing this, the size of the container gets resized as well. So when I clicked them all, then the height of the whole container is huge and we don't want that. Refactoring that will be awesome.

  I noticed in the mobile state, an error is prompting in you background-image. As I look into your css, I noticed that you made a declaration like this background-image: url(../images/bg-pattern-mobile.svg);. This works only if your css is inside of a folder. Because ../ means in path is that, go up and since your css is already at the same level of the other, it goes to the root which we don't want. Just making it background-image: url(images/bg-pattern-mobile.svg); will do the work okay^^

  Also, at point 913px going down, the layout is destroyed, checking that one out will be great idea^

  0

  ---

  

  Vinicius Scarabelli•130

  @S0NESPosted over 3 years ago

  about the background-image i really didn't noticed haha, i will fix right away. The way that i did the layout i don't know how to fix the problem in 913px. About the first thing that you mentioned I made it to rezise because i don't know how to make when one is clicked the others close, so is better that the container is rezised than overflowed.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @S0NES Ooh I see, have you thought about using radio buttons? Using radio buttons will make sure only one is chosen. But the thing is that, you can unclicked it right. But with js you can.

  For the container, as I can see, you have a separate container in the accordions right, a suggestion would be that, instead of resizing the whole container. You could have made the accordion container into overflow-x: scroll then set a max-height on that accordion container. This way, even if a user clicks multiple, the container will not be resized and they could just scroll the accordion. But using this will make a scrollbar appear right, but you can remove this by declaring

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

  something like that. Well that is just a suggestion, but preferences right. Goodluck and your welcome on that background image hahaha

  0