Why does the Debut theme slideshow image keep getting cropped?

Store Design
1

Hi team,

I would like someone can help me with the slideshow issue on Debut theme.

I want to add images into the Slideshow section. However the image is keep getting cropped no matter what image size I use. Even when I managed to resize the image to kinda fit, once I switch to mobile version, the image is cropped again.

Under Slide Height setting, I use Medium

mobile.jpg
mobile.jpg828×1792 128 KB

desktop.PNG
desktop.PNG1867×872 338 KB

Thanks

2

@CptJack93

Please share store URL!

Thanks!

3

Hi,

URL: https://theuglysocks.co.nz

4

Hi,

I think the size of your slider images is always going to be a compromise between desktop and mobile. The issue is that by default you can’t specify different slider images based on the screen size. I’m sure you could do this but would require some custom code for the theme.

However, in the short term, I’d recommend using a template slider image (I’ve uploaded) to work out exactly what is displayed at different screen sizes. You’ll then need to modify your slider images so the bulk of the information you want to display is visible at different screen sizes.

FYI - the recommended image sizes for the Debut slider can be found here: https://webpop.io/shopify/image-sizes/

Cheers, Kym.

5

Hi, @CptJack93 .

Thank you for reaching out and posting this question!

I understand that you’ve tried everything and the images are still appearing cropped on either, mobile or desktop. As suggested by @MonMech , the reason this is happening is because all of our themes are designed to support responsive images. Responsive images are images that respond to the size of screen on which they’re being displayed, so that your high-resolution images will be just right regardless of the device.

It is possible to edit the theme and disable the responsive feature; however, this type of customization isn’t supported by our design policy and your images would no longer be optimally displayed across different devices (eg. desktop, laptop, tablets, phones). Instead, we’d recommend adjusting the images using the amazing guide shared by @MonMech or our guide - Best practices for slideshows, image banners, and full-width images.

I’d love to know if either of these guides can help you with the images. Let me know!

6

@CptJack93

I have check your slider image but slider image size display correctly if not solve your problem let me know.

Thanks!

7

Hi,

Thank you for your help. I use your guide and resize my slide image, put that image on as the first on in the slide and it work now.

Appreciate it.

Thanks

1 Like