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

[billybong]

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

[websensepro]

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

[billybong]

www.billybongstyle.com

[websensepro]

@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:

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!

[billybong]

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

[websensepro]

@billybong 

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

[oscprofessional]

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

<picture>
  <!-- Mobile Banner -->
  <source srcset="{{ section.settings.mobile_banner | img_url: '600x600' }}" media="(max-width: 768px)">
  <!-- Desktop Banner -->
  <source srcset="{{ section.settings.desktop_banner | img_url: '1800x800' }}" media="(min-width: 769px)">
</picture>

2. Using srcset 

<img 
  src="{{ section.settings.desktop_banner | img_url: '1200x600' }}" 
  srcset="
    {{ section.settings.mobile_banner | img_url: '600x400' }} 600w, 
    {{ section.settings.tablet_banner | img_url: '900x500' }} 900w, 
    {{ section.settings.desktop_banner | img_url: '1800x800' }} 1800w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 100vw"
  alt="Banner Image">

[DaisyVo]

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!