Solved

How can I resize my slideshow images for mobile viewing?

LEUNGGUOTAO
Excursionist
29 0 4

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

 

 

Accepted Solution (1)
Hardik29418
Shopify Partner
2913 419 1083

This is an accepted solution.

@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;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 9 (9)

Hardik29418
Shopify Partner
2913 419 1083

@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;
}
}

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
LEUNGGUOTAO
Excursionist
29 0 4

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.pngLEUNGGUOTAO_1-1627455955941.png

 

 

Hardik29418
Shopify Partner
2913 419 1083

This is an accepted solution.

@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;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
yazmeenah
Visitor
2 0 1

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

tmt221
Visitor
1 0 0

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

especially the height

 

TwoLittleAngels
Visitor
2 0 0
What?
design12212
Tourist
3 0 2

@Hardik29418 

 

Hardik29418
Shopify Partner
2913 419 1083

@design12212  on which page?

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
TwoLittleAngels
Visitor
2 0 0

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!