FAQ Accordion Card

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Tjaša, well done attempting this challenge! It's certainly not an easy one due to all the different positionings! I'm looking at your site with the inspector pulled up and set at 1440px, and comparing it with the original desktop design, it does look like it's a bit shifted to the left. You can add some margin-left to shift it back to center, although I'd be more interested to find out why it's a bit off center in the first place. Also, in the desktop view, it looks like the image is still the mobile one, so you might want to change that with a media query.

  There are some other issues that I feel you can look into. I see that your FAQ answers are overflowing off the component container when multiple answers are opened. While you can add a overflow:hidden and/or just change your JS to have only one answer opened and close the other ones, I think you should see what's causing the overflow in the first place. There seems to bit some "hacky" solutions used; a lot of your elements are outside of their parent containers due to the use of huge negative values for positioning, while this could seem fine on your working browser, they might appear quite different on someone else's.

  For some quick tips, I'd just suggest you use flexbox in the container that houses the image and the FAQs, and also, when dealing with positioning elements, you may want to use other units such as rem instead of percentages. I would suggest that you check out some other solutions and then try this challenge again; I highly recommend ApplePieGiraffe's solution as a reference. Happy coding!

  Marked as helpful

  0