FAQ Accordion using Grid only responsive Design

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Never set overflow: hidden on the body element unless you're displaying a modal. It should not have overflow: hidden because this disables scrolling, which is bad for mobile users. Even I had zoom, and I wasn't able to see the bottom part of your solution 😢.

  • position: relative is also unnecessary on the body element, and it's better to use a CSS reset to remove default browser styles than setting margin: 0 on the body element.

  • The <div class="attribution"> should be a footer element.

  • While div is excellent for positioning and styling, it's not an interactive element. It should not have a cursor pointer because it's not intended for that purpose. You should replace it with an interactive tag, like a button.

  I hope you find it useful! 😄

  Happy coding!

  3

  ---

  

  John Carruthers•310

  @techyjcPosted 11 months ago

  @MelvinAguilar removed the overflow hidden. the position relative is there for the attribution which has position absolute (bottom of the page).

  I just decided not to use a CSS reset as I can use the cascade and remove margins/padding at different levels or setup a utility class.

  I can swap the div for a tag or button then just modify the javascript to prevent default. But it was more about just practising. I'm doing this for fun!

  Thanks for the feedback, thought I'd share my own thoughts.

  John Carruthers

  0

  

  John Carruthers•310

  @techyjcPosted 11 months ago

  @MelvinAguilar I have made most of the changes including removal of overflow.

  1
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 11 months ago

  Hello @techyjc!

  Your project looks pretty good!

  I have just one suggestion:

  • Since the plus icon is a clickable element, it's nice to add cursor: pointer; to it.

  I hope it helps!

  Other than that, great job!

  1

  ---

  

  John Carruthers•310

  @techyjcPosted 11 months ago

  @danielmrz-dev Good point. I will amend the CSS. Have a few other bits to fix as well. Thanks for the feedback.

  1
• 

  John Carruthers•310

  @techyjcPosted 11 months ago

  Appears to be some errors with aria attributes. I will correct them.

  0