Make Image Slideshow responsive on mobile | Savor Theme

Topic summary

A user encountered an issue with the Savor theme where image slideshows displayed correctly on mobile hero sections but appeared improperly scaled on desktop views.

Problem identified:

  • Slideshow images not scaling appropriately across different screen sizes
  • Desktop display showed incorrect formatting while mobile heroes rendered properly

Solutions proposed:

  • Adjust image sizes separately for mobile and desktop through the theme editor
  • Apply custom CSS targeting mobile viewports (max-width: 749px) to control minimum height and object-fit properties

Resolution:
The issue was resolved using custom CSS code that sets slideshow minimum height and adjusts image object-fit to ‘contain’ with centered positioning for mobile screens. The user confirmed this solution worked successfully.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.

On heros, it looks correct

Could I get some help on this? Thanks

Savor theme.

oh i see what you mean, the section looks correct on mobile but not on desktop. this could be caused by how the slideshow or image is scaling for different screen sizes

Hi @lisbotech25

I think this issue can be solved by adjusting the image size specifically for both mobile and desktop, you should be able to do so in the theme editor. If you’re enable to, let me know so i can explain how you can do so.

HI @lisbotech25

You can try to add this to the Slider Custom CSS block

@media screen and (max-width: 749px) {
    slideshow-slides[size=small] {
        min-height: 10.5rem;
    }

    .slide__image-container>.slide__image, .slide__image-container>.slide__video, .slide__image-container>.slide__video-poster {
        object-fit: contain;
        object-position: center center;
    }
}

It is a bit difficult because images have text, and the theme does not have an option to upload a separate image for mobile, I think.

This worked, thank you so much.

Thanks to everyone else aswell.

1 Like