FAQ Card - Dropdown Component Only using HTML and CSS

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi VIGNESHAJITH,

  To make the illustrations positions fixed for all view size, I think it's easier using position: absolute; and transform property. Here's what I will do to make the position of the woman illustration and background pattern fixed and easy to maintain:

  .bg-pattern {
      position: absolute;
      left: -50%;
      top: 50%;
      transform: translateY(-58%);
  }
  .woman_illu {
      position: absolute;
      left: -10%;
      top: 50%;
      transform: translateY(-50%);
      width: 50%;
  }
  

  I think we could safely remove z-index property because it's not necessary here.

  We could also use the same technique to position the small-box image.

  Please note that the above code is only for desktop view. You will need to adjust them for the mobile view.

  Hope this helps. Happy coding!

  Marked as helpful

  0

  ---

  

  vigneshajith•80

  @vigneshajithPosted almost 2 years ago

  @amalkarim Hi dude 👋, Thanks for sharing your knowledge with me. That was really helpful keep help other's 👍.

  Happy Coding!! 😊

  0