Slide images are too small in mobile ...can i use different sizes for images to mobile and desktop?

Shopify Discussion
1

Slide images are too small in mobile …and too big in desktop…can i use different sizes for images to mobile and desktop?

pls help

2

Hi @billybong , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

www.billybongstyle.com

4

Hi @billybong ,

Yes, you can use different image sizes for mobile and desktop views in Shopify! This can be achieved by implementing Shopify’s Liquid code to serve different image sizes based on the user’s device. Here’s how you can do it:

  1. Using picture tag
  1. Using srcset
5

@billybong

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:990px){
.owl-carousel {
    height: 66vh !important;
}
.owl-carousel.owl-drag .owl-item .item img {
    height: 66vh !important;
    object-fit: fill;
}
}

@media(min-width:991px){
.owl-carousel.owl-drag .owl-item .item img {
    height: 90vh !important;
}
}

Result:

websensepro_0-1736163663966.png
websensepro_0-1736163663966.png1366×603 319 KB

websensepro_1-1736163867882.png
websensepro_1-1736163867882.png514×524 107 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

6

Hi thnx for ur help but I’m beginner this looks too stretched ..can u help me

1000232882.jpg
1000232882.jpg1240×2772 194 KB

7

@billybong

Bro, this will happen. If I give you advice, your site looks really good. It’s better if you don’t change it.

8

Hi @billybong

You should consider using a different image. For desktop, it is recommended to select images with a 16:9 aspect ratio (16 units wide and 9 units tall).
For mobile, the opposite is preferable to ensure better visibility.

Let me know if you need further assistance!