Frontend mentor FAQ accordion challenge using basic js css and html.

Community feedback

• 

  P

  Jake Godsall•1,390

  @jakegodsall

  Posted over 1 year ago

  Hi 👋

  After taking a quick look at your code, it seems that the reason you can't resize the star image is because there are still max-height properties being applied to the image from the larger viewport media queries. This property is being overwritten with each media query decreasing in width, but in the @media (max-width: 400px) media query, you want to ignore this. A way to do this would be to set:

  @media (max-width: 400px) {
      .star_image {
          max-height: none;
          /* add width and height here */
      }
  }
  

  The sizing should work then.

  Taking a look at the JavaScript, there's a couple of things I would mention to reduce redundancy.

  The first thing would be to use classes that can be added and removed from the elements. For example:

  .hidden {
      visibility: hidden;
  }
  

  Then, you can use JavaScript to add or remove the class when the element is clicked:

  myElement.addEventListener("onclick",  function(event) {
      event.target.classList.toggle("hidden");
  });
  

  This will apply the CSS visibility: hidden property when clicked, and then remove it again when clicked again.

  Using this approach you don't need to have separate logic for applying styles and then removing them again.

  Hope this helps 😁

  12

  Marked as helpful