FAQ accordion card using html, js and css flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Though I had to zoom out to see the desktop layout since you are using 1440px as breakpoint for desktop layout which is too big, lots of users using 1366x768 like me will need to zoom out to see that. The 1440 on the design does not mean it is the breakpoint, toning it down would be really great. Mobile state looks fine.

  Some other suggestions would be:

  • It would be great to have a base styling with these properties

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  This way, handling an element's size will be lot easier because of the box-sizing: border-box. You can search up some more of how this works.

  • Also I think you positioned properly the image using those pseudo-selectors which is great , since you avoided creating extra img.
  • Using div as the toggle for the accordions is not really great. Interactive components uses interactive elements. By using div you are making it not-accessible.
  • Instead for simplicity, you can use details element on this as it is suited for accordions and it is really accessible at hand and you don't need to manipulate the attributes if you were to use button.
  • For the dropdown img add aria-hidden="true" attribute on it so that it will be totally hidden for screen-reader users.
  • Lastly, remove the position: absolute on the footer as it only gets in the screen. Try viewing the layout in dev tools at the bottom.

  Aside from those, great job again on this one.

  Marked as helpful

  2