FAQ-Accordion-Card

Community feedback

• 

  Devmor•470

  @devmor-jPosted over 2 years ago

  Great 🏆🎇 The functionality is there and it works. But there are some minor styling issues 🎨. If you like CSS refactoring (which I highly recommend), These are my suggestions:

  1️⃣ main content should fill the whole screen space (because it has a gradient):

  /* add these properties to these rules */
  main {
      ...
      min-height: 100vh;
      align-content: center;
      padding: 2rem;
      ...
  }
  
  .main {
      ...
      /* 50rem is the total width of the faq card, adjust if not happy with it */
      width: min(100%, 50rem);
      ...
  }
  

  📝 remove these extra height properties:

  html {
      height: 100%;
  }
  
  body {
      height: 100%;
  }
  

  2️⃣ in mobile view there is not enough space to show decorative image and content side by side. so either remove it for screens below '40rem' or stack them on top of each other (I personally have removed it):

  @media (max-width: 40rem) {
      .image {
          display: none;
      }
  
      .faqs {
          width: 100%;
      }
  }
  

  3️⃣ class of .faqs has a complex padding and specially on mobile view causes a big empty gap next to arrows, so maybe '2rem' or '3rem' should suffice:

  .faqs {
      ...
      /* adjust to your own preference */
      padding: 2rem; 
      ...
  }
  

  4️⃣ your image trick is awesome and I liked it 🥰

  5️⃣ class of .arrow could improve a lot, here is my version:

  .arrow {
      transition: transform 0.3s ease-in-out;
      align-self: center;
      object-fit: contain;
      width: 0.75rem;
      margin-left: 0.75rem;
      user-select: none;
      pointer-events: none;
  }
  

  ❗ and to update your accessibility report (saying about 'role=main', you have to manually generate a new one (there is a red button to do so next yo your report). Same thing goes for screenshots.

  Have a nice time and cheers 😄🎉

  Marked as helpful

  0

  ---

  

  elahe•50

  @elahemirzaeePosted over 2 years ago

  @devmor-j Devmor You are always full of good and useful advices that i enjoy to hear them :) I have fixed these problems in my code and i hope i won't make any mistake again Thanks a lot for your attention and i would be very happy if i can keep in touch with you on github

  1

  

  Devmor•470

  @devmor-jPosted over 2 years ago

  @elahemirzaee You're welcome, mistakes make experience, don't worry we've all been there, even I make some silly mistakes every day because learning can't happen without mistakes.

  I keep an eye on devs here often times to help and learn from them.

  Marked as helpful

  0