Responsive FQA Accordion Card

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 3 years ago

  Hey Nayana, I just completed this challenge also; you can have a look at my repo (https://github.com/elaineleung/frontendmentor/tree/main/accordioncard) and compare the code.

  You can try a few things here:

  1. Use light gray for the divider line in the FAQ (see the HSL color code in the style guide)

  2. Use overflow:hidden to hide the part of the SVG that is sticking out. If you compare the original view in the challenge, you can see that the left corner of the image is actually hidden.

  3. Your desktop views will need to use the desktop version of the images. I see in your CSS that you tried using background-image for the images; that's also what I did, and this is probably the best way since there is a mobile image and a desktop image. One thing that helped me was, I used the browser console to get the exact width and height of the SVGs, and I was able to use those dimensions in my CSS.

  You can try tweaking your solution a bit more, especially in trying to use the desktop version of the image. Good luck!

  Marked as helpful

  3
• 

  Carlos•1,110

  @Carlos-A-PPosted about 3 years ago

  Hey Nayana,

  • I would maybe try looking into position absolute so that you can group your images together in a wrap div and set the parent element to position relative. This allows you to move the child element around the parent
  • What I did is I used the shadow as a background image in the accordion div to switch between the mobile shadow and desktop shadow. I then used background position: left # top #; to position the image
  • I normally use display: none over visibility hidden. They're both a little different where display:none will hide the element and collapse the space it was taken up. visibility:hidden will hide the element and preserve the elements space

  Marked as helpful

  2