FAQ Accordion Card - vanilla HTML/CSS/JS

Community feedback

• 

  Lucky victory•60

  @Lucky-victoryPosted about 3 years ago

  you can't use <h2> in a <span> element, if your purpose of doing that was to make the text bold, then you should use <strong> element instead.

  Marked as helpful

  1

  ---

  

  Alistair•20

  @agariochPosted about 3 years ago

  @Lucky-victory thanks, I wasn't aware of that! Changed span to div.

  1
• 

  Ken•935

  @kenreibmanPosted about 3 years ago

  For desktop, you're using the mobile background for the card, you should replace that with the correct desktop background.

  To make the box "overflow" on the side, you should have a wrapper going around the desktop image with a position relative, then use position: absolute on the "illustration-box" and positioning it to the very left and center of the wrapper.

  If you're confused, take a look at my github code for the same challenge. I did:

  .wrapper-illustration {
    position: relative;
  }
  
  /* ILLUSTRATION BOX */
  .illustration-box {
    position: absolute;
    left: -5.5rem;
    top: 7rem;
    z-index: 10;
    width: 191;
    height: 184px;
  

  EDIT: Looked at your live site, looks like you solved the issue!

  Marked as helpful

  0

  ---

  

  Alistair•20

  @agariochPosted about 3 years ago

  @lmaoken thanks, yes, the screenshots weren't showing the final layout, I think because I was using a CSS media query to change the image source rather than showing/hiding 2 images.

  I looked at your solution, it's great, really clean and I like the floating box animation a lot!

  0