How can I resize my slideshow images for mobile viewing?

Store Design
1

Hi there

I would like to change some of the size for image in slide show to make it bigger than before on mobile version ( desktop version is ok) . 399px*341px is the size I am looking for .Pls help me .

My Url : sales.bellissimochina.com

LEUNGGUOTAO_2-1627439950291.png
LEUNGGUOTAO_2-1627439950291.png346×506 62.6 KB

2

@LEUNGGUOTAO

Please Go to Online Store → Themes → Edit code → Assets → theme.scss.liquid and paste this code at the end of this file.

@media only screen and (max-width: 400px) {
#shopify-section-1626935711b8e5c40e .home-slideshow .slideshow .images-contain img {
    height: 341px;
    -o-object-fit: cover;
    object-fit: cover;
}
}
1 Like
3

Hello Thanks！it works! But the size of slideshow is difference when I use different mobile phone to browse it .Why? Can I keep it same?

LEUNGGUOTAO_0-1627455950369.png
LEUNGGUOTAO_0-1627455950369.png828×1792 176 KB

LEUNGGUOTAO_1-1627455955941.png
LEUNGGUOTAO_1-1627455955941.png1080×2339 199 KB

1 Like
4

@LEUNGGUOTAO Please remove my old code and set this new code

@media only screen and (max-width: 500px) {
#shopify-section-1626935711b8e5c40e .home-slideshow .slideshow .images-contain img {
    height: 341px;
    -o-object-fit: cover;
    object-fit: cover;
}
}
2 Likes
5

@Hardik29418

Hey any chance you can help me with this? I am confused by the class IDs and placement.

The website I am looking to decrease slider size is www.nooriapparel.com

6

@design12212 on which page?

7

Hello I know this is an old post but I’m having the same problem. I am having this problem with the slideshow on my homepage. The images are too big in the slideshow, and making it load slow. Thank you

1 Like
8

Where do we have the “edit code” option? I’m sorry, I’m don’t know how this works a little help would be highly appreciated!

9

what if i want to make the slideshow smaller on the desktop version

especially the height

10

What?