FAQ accordion card - CSS Grid and Flexbox

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Lucca, congrats on finishing the challenge! good job!

  I will try to answer your questions as good as I can:

  1. You can use a CSS box-shadow-generator combined with a chrome extension called pixel-perfect to check wich box shadow fits better, or just go the old way and try until you get the desired effect!

  2. You will probably have to manipulate the height of the element that dropsdown with a Javascript addEventListener and then add an animate effect from height 0 to 100!, it sounds simple but is a bit trickier and hard to get used to it.

  3. Set your body min-height: 100vh and the background will take the whole screen, if you want it to get exactly the screen on your project, you will have to remove the margins from your card and use flex on the body like this:

  body {
  min-height: 100vh
  display: flex;
  justify-content: center;
  align-items: center;
  }
  

  Hope my feedback and aswers helped you!, if you have any questions, don't hesitate to ask!

  Marked as helpful

  1