app-landing – carousel iphone notch

[Frankie991]

Hello, few weeks ago, Rodrigo, the Support helped us with adjusting the image in carousel in app-landing demo site, we again need your help.

Is it possible for images to slide behind the iPhone 12 notch ? The frame is png transparent image.

Can you help us with adjusting the images in frame, and if possible for images to slide behind the notch.

Thank you !

---

Template Version: 8.3.0

[Support]

Hello,

Here’s the code you need:

Replace all code at (css/custom.css):

/* Add here all your CSS customizations */
.owl-carousel.custom-background-1:before {
  width: calc(100% - 1px)
}

@media(max-width: 1199px) {
  .owl-carousel.custom-background-1:before {
    width: calc(100% - -3px);
    left: -2px;
  }
}

@media(max-width: 991px) {
  .owl-carousel.custom-background-1:before {
    width: calc(100% - -4px);
    left: -2px;
  }
}

@media(max-width: 767px) {
   .owl-carousel.custom-background-1:before {
      width: calc(100% - -2px);
      left: -2px;
   }
  .owl-carousel.custom-background-1 .owl-stage {
    max-height: 541px !important;
  }
}

@media(max-width: 575px) {
   .owl-carousel.custom-background-1:before {
      width: calc(100% - -4px);
      left: -2px;
      top: -1px;
   }
  .owl-carousel.custom-background-1 .owl-stage {
    max-height: 541px !important;
  }
}

.owl-carousel.custom-background-1 .owl-item img {
    border-radius: 25px;
}

.owl-carousel.custom-background-1 .owl-stage {
    overflow: hidden;
    max-height: 541px;
}

.owl-carousel.custom-background-1 {
    bottom: -15px;
    padding: 3.7% 4.3% 40%;
}

@media(min-width: 992px) {
    .custom-background-1 {
        max-width: 262px;
    }
}

@media(max-width: 991px) {
    .custom-background-1 {
        max-width: 278px;
    }

    .owl-carousel.custom-background-1:before {
        background-size: 100%;
        top: -1px;
    }
}
/*Hover info za admin panel za ikonice*/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

We hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Frankie991]

Hi Rodrigo, its almost perfect, please check live version.

Is there a way for placing smartphone.png in front of overview-carousel-1.jpg because of this notch on smartphone frame?

Maybe then the angle transition can be little bit better.

Thank you for helping us!

---

[Support]

Hello,

Oh right!

This is possible.

Change the first code at custom.css to:

.owl-carousel.custom-background-1:before {
  width: calc(100% - 1px);
  z-index: 1;
  pointer-events: none;
}

Hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Frankie991]

Thank you!

---

[Support]

Hello,

Great the issue is resolved now!

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts