Make image slideshow reponsive- desktop and mobile

Store Design
, , , , , ,

Topic summary

A user is experiencing issues with image slideshow responsiveness across desktop and mobile devices, despite following recommended dimensions (1920x1080, 16:9 aspect ratio).

Current Problem:

  • Images display inconsistently across different screen sizes
  • Mobile view shows excessive spacing/height
  • Specific issues with mobile portrait orientation

Proposed Solutions:

  1. One responder suggested reducing mobile slider height to ~400px and requested screenshots to better diagnose the responsiveness issue
  2. Another recommended creating separate slideshow sections for desktop and mobile, using CSS media queries to hide/show appropriate versions:
    • Hide desktop carousel below 749px width
    • Hide mobile carousel above 750px width

Current Status:
The CSS solution was attempted but only partially successful—working on mobile landscape and failing on mobile portrait, with no change on desktop. The issue remains unresolved and requires further troubleshooting.

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

Dear Friends,

I need to make the images slideshow responsive to the image size on desktop and mobile. I hope this is the best solution to overcome the image size issue. I followed the given image size 1920x1080 and tried others, aspect ratio 16:9, but still the issue exists.

Url: https://ba0ven-x1.myshopify.com/

Looking forward for your feedback on this matter,

Thanks and best regards

1 Like
2

Hello, In mobile view your slider image take the lots of space. Do you want to reduce that and made the slider like 400px height.
If you give screen shot of the area of the responsiveness you pointing. we will try to help you.
In different size in my testing the image looks good.
Looking forward from you.

3

Please have a look on the website, to be frank I don’t know what’s the
right one. Appreciate your help. Thank you

4

Hi @Alliance

You can create 2 different image slideshow sections, one for mobile and another one for desktop, then add custom CSS code to hide desktop slides on mobile and vice versa.

Add this code to Custom CSS of the desktop version

@media (max-width: 749px) {
.carousel { display: none; }
}

This code to the mobile slideshow version

@media (min-width: 750px) {
.carousel { display: none; }
}
5

Hi,

On mobile portrait view: not functioning, On mobile landscape: functioning

On desctop: No change.

Thanks and best regards

1 Like