html, css

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey just to add up, to prevent the sizes. As far as I can see, when you click an accordion, your container resizes based on it. A trick is, giving the right container a fixed height then making the overflow of it to overflow: visible scroll so that it doesnt resizes, then if you want the scrollbar to be hidden, you need to add some selectors to it like this

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

  this is from w3schools^

  0

  ---

  

  Luis Fernando Perez Varajas•210

  @luispv02Posted over 3 years ago

  Thank you very much for the comments, I will take them into account. =)

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @luispv02 Your welcome on that^

  0
• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @luispv02!

  Not sure what you mean by 'incorrect way', but the way I would do it is select all questions using document.querySelectorAll() method and then loop through the node list and add an event listener to the questions that way. Now that you've submitted your solution, you can browse the challenge hub and see how others dealt with it, I often find it helpful.

  As per overflow - you set overflow:hidden on the div with class header-content. If you want the box image to not be hidden, that image needs to be outside of that div. Basically, if you set overflow to hidden on a container, there is no way to make an exception for a single child element in that container. You need to pull it outside :)

  Make sure that you check the report above, it looks like there are some issues with accessibility and HTML. Another accessibility issue which is not in the report is that the questions are not accessible via keyboard, only when clicked with a mouse. You can fix that easily by using <button> instead of or around your <h3> (although tbh headings should be used in order, so if you want to use a heading element, I would go for <h2> in this case).

  Hope this helps :)

  0

  ---

  

  Luis Fernando Perez Varajas•210

  @luispv02Posted over 3 years ago

  Thank you very much for the comments, I will take them into account. =)

  0