FAQ accordion card(CSS positionning, Flexbox, JS)

Community feedback

• 

  Eles•1,300

  @eleswastakenPosted almost 3 years ago

  It was a good idea to split the card itself into two halves, the image and the content part. You could just play along and put the box image into the image half, and then just set relative to the image half. So when the image half changes the box would change accordingly.

  Side notes:

  • For the sake of accessibility use <details> and <summary> elements instead of divs. Google it.
  • Try to play around width position image in mobiles as well. Again relative to the container(image half).

  Edit:

  I didn't notice that at first, but here you go. The images that are inside the container should be background images, that is, you should set them in css as background-image: url("img-url.png"). And the box should be a child of that container.

  Marked as helpful

  0

  ---

  

  Natallia•70

  @NatalyHalouchykPosted almost 3 years ago

  @eleswastaken Thanks for your help!

  I managed to make the desktop design using background images inside the container and the box as a container's child. It's so convenient!

  But I have an issue with the mobile version. If background images are used, I cannot make them overflow the card. Instead, I tried to set the woman-image as another child of the container for images, but I don't like the result. Could you, please, give me a hint.

  0

  

  Eles•1,300

  @eleswastakenPosted almost 3 years ago

  @NatalyHalouchyk I don't think you have pushed it to github yet.

  On mobile version, as you probably did, you can display: block; image as a child of the container when the screen size is small. Set the width of the child image to 60-70%, and margin: auto; to center it. Hide every other thing, desktop images and the box.

  Was that the issue?

  Good luck!

  0

  

  Natallia•70

  @NatalyHalouchykPosted almost 3 years ago

  @eleswastaken Thank you again! Ultimately I managed to get a satisfying result!

  0