Responsive Accordion without JS.

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

  Hi, Artem! Great job on this challenge, and big kudos for finding a no JS solution!

  In order to make it more "pixel-perfect", the first thing you could do is to center the whole FAQ card on the page. To do this with regular CSS, I'd first set the min-height: 100vh in your body. Then in your container change position to absolute and add the following:

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  

  You could also add the checked attribute to the input of your second question, so that it's open on load as in the design.

  1

  ---

  

  Artem Ponomarenko•365

  @ArtemPonomarenkoPosted about 4 years ago

  @brasspetals Many thanks for the tips! Will implement in my next challenge! Cheers

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @ArtemPonomarenko

  Hey, Artem Ponomarenko!

  Yes, great job!

  Just letting you know another way you could center the accordion (in addition to nice way brasspetals explained) would be to set the display property of the body to flex and then set its align-items and justify-content properties to center.

  Also, you could match your solution a little more closely to the original design by changing the direction of the gradient to top left or something.

  There are many great ways to do the same things in CSS!

  Keep coding (and happy coding, too)!

  1

  

  Artem Ponomarenko•365

  @ArtemPonomarenkoPosted about 4 years ago

  @ApplePieGiraffe Thank you, much appreciated!

  0