Stretched Slider Images on mobile

  • I’m using Kale Pro and love it but have recently started having a few problems with my slider images. When I view them on a mobile, and only on a mobile it seems to work fine on a desktop, the images are stretched and distorted. I’m using images which are 1200 x 800 and they look great on a tablet and a desktop but don’t work well on a mobile.
    Is there anything I can do to fix this? I’ve tried regenerating thumbnails and deactivating plug ins but can’t seem to fix it.
    Thanks for any help
    My website is https://www.thetoeoftheboot.com

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @livvypb,

    Thank you for getting in touch with us.

    Please go to Appearance → Customize → Additional CSS and add the following css:

    .owl-carousel .owl-item img { height: auto !important; }

    Hope that helps. Thank you for your time in this.

    Best regards

    Thread Starter livvypb

    (@livvypb)

    Thanks, I’ve tried it but it is still not working though. Any other suggestions?

    Theme Author lyrathemes

    (@lyrathemes)

    @livvypb

    So one of the images on your slider is this one: https://i1.wp.com/thetoeoftheboot.com/wp-content/uploads/2015/08/img_1454-e1500894504114.jpg As you can see, it is originally a bit blurry but also the aspect ratio is wrong. It is more of a portrait mode picture.

    You also have Jetpack optimizing the images which further adds to the problem. I would suggest first trying images that are more geared towards that area, such as more landscape/rectangular images (1200×550 preferred).

    You can also try using the “Use Full Image Sizes” option for the custom slider – more details here: https://www.lyrathemes.com/documentation/kale/#custom-slider That would use your images AS IS, without trying to resize them for that area.

    Thread Starter livvypb

    (@livvypb)

    I’ve changed all the images so they are now 1200 x 800 but they still appear distorted on a mobile.they look perfect on a desktop computer so think the problem is just in the mobile but seeing as most of my traffic comes from mobile views I don’t want the images to be distorted. Am I going to have to abandon the slider? Hope not…

    Theme Author lyrathemes

    (@lyrathemes)

    @livvypb Did you try disabling the Jetpack feature that is optimizing the images? If that makes a difference, please let me know and we can dig into this a bit deeper.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Stretched Slider Images on mobile’ is closed to new replies.