Flexbox page

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Octávio,

  Generally, you will need the image parent's element of the image has this property overflow: hidden;. But in this challenge, it's quite tricky. Because there are two images that shouldn't go beyond card boundaries, and there is an image that should go beyond boundaries (the red box image).

  To make this work, we need to create an element inside <section class="faq__container-destop"> that has position: absolute; and the same width and height as .faq__container-desktop itself, but with overflow: hidden;, then we place two images inside it. And we place the red box image outside it to let it go beyond the boundaries. Don't forget to give .faq__container-desktop position: relative;

  If you still have any problem, feel free to reply this comment

  Marked as helpful

  1

  ---

  

  Octávio Garcia•550

  @oc-garciaPosted almost 2 years ago

  @amalkarim thanks Amal! I created a overflow-container inside the faq__header but the desktop and shadow image desappeared behind the card. Not sure what I am doing wrong. If you could take a second look it would be amazing.

  0

  

  Ali Ahmed•680

  @Dany-GitHubPosted almost 2 years ago

  @oc-garcia I checked your solution the issue is coming from width and height you need to give .faq__header and overflow container as well then modify the left and tap for each image

  0

  

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  @oc-garcia

  Place .overflow-container outside .faq__header. Like this:

  <section class="faq__container-destop">
      <div class="overflow-container">
          ....
      </div>
      <div class="faq__header">
          ....
      </div>
      ...
  </div>
  

  Then give it full width and height of its parent (.faq__container-destop)

  overflow-container {
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
  }
  

  After that:

  • You will need to adjust the position of two images inside .overflow-container.
  • And give faq__photo-box bigger z-index than .overflow-container. Or, maybe just remove z-index property from .overflow-container because I think it's unnecessary.

  0
• 

  Ali Ahmed•680

  @Dany-GitHubPosted almost 2 years ago

  You can set the overflow to hidden like that overflow: hidden; for more info you can see the documents MDN

  2