Accordion Card

Community feedback

• 

  Yefree Valdez•840

  @yefreescodingPosted over 1 year ago

  You did an amazing job!! I can give you some tips, and solutions for "figuring out the position and height of the container when the accordion is opened up".

  • First your body, I think has too much height:

  body {
      height: 170vh;
     /* rest of the styles */
  }
  /* Use the css calc function */
  body {
      /* 
      After do some testing 200px won't make the accordion 
      to cause overflow when it is fully open.
      */
      height: calc(100vh + 200px);
      /* rest of the styles */
  }
  

  • In addition to that, use the align-items property and give it the value start, this will position your component to the top of the page.

  body {
      height: 170vh;
      display: flex;
      align-items: start;
      justify-content: center;
  }
  
  

  • Theres no need to give your container all that margin, a margin auto will make a better fit:

  .container {
     /* All the styles */
      margin: auto;
  }
  

  Just one more thing. Try to use less px as measure unit, and lear about relative units like em, and rem.

  Overall I think you did a great job. Your code is easy to read, semantic, and accesible. You develop the solution mobile first, for I could see in your code, that's a really good practice. Your solution and the original design are identical. Congrats!!

  Marked as helpful

  0

  ---

  

  Ayomikun Wahab-Jimoh•420

  @MkzayPosted over 1 year ago

  This was really helpful, thank you! @yefreescoding

  0

  

  Yefree Valdez•840

  @yefreescodingPosted over 1 year ago

  @Mkzay

  You're welcome! Just wanted to say that I found an even better solution: Adding a overflow: scroll to the parent container 😅, in this case to the body.

  Marked as helpful

  0