Image on slider not resizing correct

[RTJohnson85]

I have placed an image in the slider at this line below it is not resizing in mobile correct. Please help.

<li data-transition=”fade”>
<img src=”img/demos/finance/slider/slide-finance-1.png”
alt=””
data-bgposition=”center center”
data-bgfit=”cover”
data-bgrepeat=”no-repeat”
class=”rev-slidebg”>

<h1 class=”tp-caption text-uppercase font-weight-bold”
data-x=”left” data-hoffset=”[’15’, ’15’, ’35’, ’35’]”
data-y=”center” data-voffset=”-110″
data-start=”800″
data-fontsize=”40″
style=”letter-spacing: -2px;color: white”
data-transform_in=”y:[-300%];opacity:0;s:500;”></h1>

<div class=”tp-caption text-uppercase”
data-x=”left” data-hoffset=”[’15’, ’15’, ’35’, ’35’]”
data-y=”center” data-voffset=”0″
data-start=”1200″
data-fontsize=”22″
data-transform_in=”y:[-300%];opacity:0;s:500;”>You’re not alone. We’re here to help</div>

<a class=”tp-caption btn btn-primary custom-btn-style-1 text-uppercase font-weight-semibold”
data-x=”left” data-hoffset=”[’15’, ’15’, ’35’, ’35’]”
data-y=”center” data-voffset=”70″
data-start=”1500″
data-fontsize=”[’12’, ’12’, ’12’, ’22’]”
href=”contact.html”
data-transform_in=”y:[-300%];opacity:0;s:500;”>Learn More

---

[Support]

Hello,

That’s the default behavior of slider background images. On mobile devices always will “cut” some parts of the image. By default the images are defined to be centered in the screen (cutting the sides).

An alternative is use custom css with media querie to move the image background horizontally. For example, add this code below at “css/custom.css”:

@media(max-width: 767px) {
    .rev_slider li.tp-revslider-slidesli .slotholder .tp-bgimg {
        background-position-x: 40% !important;
    }
}

This will move the image horizontally at screens below 768px (mobile).

We hope this helps!

Please try that and let us know if you need further assistance.

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

---

[Author]

Posts