Pure HTML, CSS and JS FAQ Accordion

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 center these types of elements using position absolute because they will overflow if the component's content is too large, especially on small screens. Instead, use flexbox or grid, as they are more modern methods with fewer lines of code and far fewer issues. You can read more about centering in CSS here 📘.

  • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 560px or 37.5rem to make sure that the component will have a maximum width of 560px on any device, also remove the width property with a percentage value. Using this technique would spare you the need for media queries to adapt the component.

  • Additionally, you should look into the use of clamp for font sizes; currently, the text size is too small and can become difficult to read.

  • inputs don't require position absolute.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding and Happy New Year! 🎉🎊🎁

  Marked as helpful

  1

  ---

  

  Alexandre Xavier•60

  @abxsantosPosted 11 months ago

  @MelvinAguilar thanks a lot! I've adjusted some properties and now it seems much better!

  Thanks for the clamp tip as well, I didn't know that!

  0
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 11 months ago

  Fala, @abxsantos!

  Seu projeto ficou muito bom!

  Uma coisa que pode te ajudar na parte da responsividade é a abordagem mobile first e as media queries.

  Iniciar um projeto pelo mobile torna muito mais fácil adaptar pra telas maiores do que o fluxo contrário. Uma vez que a versão mobile está finalizada, você pode usar as media queries pra alterar somente o necessário quando a tela for maior.

  Exemplo de media queries:

  h1 {
    font-size: 1rem;
  }
  
  @media (min-width: 768px) {
    h1 {
      font-size: 2rem;
    }
  }
  

  Essa configuração acima fará com que seu título tenha um tamanho de 1rem na versão mobile (ou em qualquer tela menor do que 768px), mas em qualquer tela maior do que 768px, o tamanho do título será 2rem.

  As media queries são essenciais pra tornar um projeto responsivo.

  Então minha sugestão, seja pra projetos pequenos ou grandes, é sempre começar pela versão mobile e use @media pra alterar o que for necessário pras telas maiores.

  Espero que ajude!

  Marked as helpful

  1

  ---

  

  Alexandre Xavier•60

  @abxsantosPosted 11 months ago

  @danielmrz-dev perfeito cara! Valeu demais pelas ideias, o ponto de já começar por mobile com certeza vou levar pro resto dos desafios!!

  1