How can I fix mobile slideshow resizing issues?

Hi,

I am trying to optimize the slideshow at the top of my store for mobile. The images are currently cut off and wonky. Does anyone have a suggestion? Thanks a lot!

@KatieZi - I recommend you to use 2 sliders, 1 for desktop only and 2nd for mobile only.

SO you will have 2 sliders on the page and then using css we can show the one needed and hide other. This way your images will not look stretched or cut off.

Thanks for your quick reply @suyash1 ! My slideshow has 3 different slides. Is it still possible to optimize the view for mobile?

@KatieZi - create 3 new slides for mobile only, adjust its height/width for mobile view. so total you have 6. 3 for desk and 3 for mobile.

Ok sounds great, thank you! This is my first store. So I am very new to this. How do I create the slides for mobile only?

@KatieZi - you will need to design slide images like you did for desktop.

ok, thanks. But how do I select them for mobile/desktop only so they’re not duplicated

@KatieZi - go to customize settings of your theme and then create 2 slide sections

first for desk - add all desk slides to it and then similarly second for mobile slides

Sorry, but I have no idea how I can create one for mobile or desktop only. It seems like they are used for both automatically.

@KatieZi - you are on right path

create 2 sliders, one will have all desk images and other will have all mobile images.

Then once you make them live, we can hide the unwanted one and show required one as per the screen size

Ok I will start working on this and let you know once I’m done. Thanks for your help @suyash1 !

@KatieZi - welcome