FAQ Accordion

Community feedback

• 

  Gabriel Crispim•400

  @sirbiel100Posted about 1 year ago

  Hello Sayed!! Congrats for your solution, it looks really nice!

  I saw that you need help with your image position, so let me help you on that:

  • The best way I found to not overflow the illustration image was: 1 - You have to create a section for your images

  <section class="FaqSection>
  
    <section class= "imagesSection">
        <img src="./path/illustration-image.png">
        <img src="./path/background-image.png">
        <img src="./path/box-image.png">
    </section> 
  
    <section>
      //Rest of the code here
    </section>
  
  </section>
  

  • Now you create a DIV inside the image section to put the images that you dont want to overflow:

  <section class="FaqSection>
  
    <section class= "imagesSection">
        <div class="overflowHiddenDiv"
            <img src="./path/illustration-image.png">
            <img src="./path/background-image.png">
        </div>
        <img src="./path/box-image.png">
    </section> 
  
    <section>
      //Rest of the code here
    </section>
  
  </section>
  

  • And in your css you cand add on that div a overflow hidden to it:

  .overflowHiddenDiv{
      overflow: hidden;
      // Rest of the code
  }
  

  So in that way your both images won't be overflowing and your box image will be overflowing.

  I hope that was helpfull!

  0