Images should not resize in slider

We’re very happy that you’re enjoying Sirv!

In general, Sirv will attempt to sync as serve as many images as possible. It can lazy load most of those images but sometimes it can’t access the image to edit its src to data-src and add a class of Sirv.

Please send us the URL of that page where we can see the slider and also a login to your WordPress admin. We will see if there is a way to lazy load the images on your page, without lazy loading the images in your slider.

The login should be sent via our secure form:

https://sirv.com/contact/

Thanks!

Hello,

I’ve filled out the form! Sorry for the long delay.

Regards

We found the cause of the unexpected image dimensions when lazy loading is enabled.

Your images are inside Owl carousel, which has some styles that are breaking the layout:

.mkdf-owl-slider .owl-item img {
    width: 100%;
}

.mkdf-show.info-bellow .mkdf-show-image a {
    height: 183.32px !important;
}

Those styles set dimensions for images which are obeyed by Sirv lazy loading. Instead, the styles should be responsive, to fit the available carousel area.

Add the following CSS to your HTML page to fix the issue:

<style type="text/css">
    .mkdf-owl-slider .owl-item img {
        width: auto !important;
    }
    .mkdf-owl-slider .mkdf-show.info-bellow .mkdf-show-image a {
        height: auto !important;
    }
</style>

We will add a new field in the next version of the Sirv plugin where you can paste those styles. (Alternatively, you could replace the styles in Owl carousel, but the fix would be overwritten if you updated Owl carousel in future.)

The new plugin version will be released in a few days and we’ll email you then.

• This reply was modified 4 years, 6 months ago by Sirv CDN and Image Hosting. Reason: Clarified instructions to fix issue

Just to confirm that the Custom CSS field was added to the Sirv plugin and released as a new version last week.

Thanks for using Sirv!

Thank you for your assistance! Top support!