How to optimize banner size for desktop and mobile?

[KetanKumar]

Hello, @WinsonNg 

Welcome to the Shopify community!
and Thanks for your Good question.

your store is password protect 

[WinsonNg]

Hi @KetanKumar 

Password is 1

[KetanKumar]

@WinsonNg 

Thanks
1. Go to Online Store->Theme->Edit code
2. Asset->/responsive.css->paste below code at the bottom of the file.

@media (max-width: 767px) {
#shopify-section-1601197765025 .bg-img {
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0;
}
}

[TekodeAU]

Thanks!

[cutsiebobbs]

Hi @KetanKumar 

Is there any chance you could help me with our website too?

We are having the same issue.

We would like the banner to be the same on mobile as it is on the desktop?

A preview link to the website with the banner that doesn't fit is here (as the promo hasn't gone live on the main page yet):

https://b44toay1sower43t-15709401.shopifypreview.com

Our actually website is here:

https://www.cutsiebobbs.co.uk/

If you could help, I would really appreciate it. 

Thanks

[KetanKumar]

Hello, @cutsiebobbs 

Welcome to the Shopify community!
and Thanks for your Good question.

sorry your preview URL doesn't work can you please share us and also screenshot further issue

[Halfsixclothing]

@KetanKumar 

Having the same issue trying to have the top image optimise for Mobile 

website: 

halfsixclothing.com 

Password: 

olosha

In addition to this having the same issue with the second image: 

And is it possible to have the video located on the home page auto play?

TIA

[KetanKumar]

@Halfsixclothing 

Thanks for is can you please hare video what do you want exactly? 

[Halfsixclothing]

Hey @KetanKumar 

Let me know if this makes thing a bit clearer, thank you. 

https://www.loom.com/share/9501553db7d645d999b53b3f2f99276c

[KetanKumar]

@Halfsixclothing 

Thanks for the details 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.feature-row__image-crop--none .feature-row__image {
    height: 300px;
}
}

if you need auto pay video it can be done customization code also some devices doesn't work auto play please confirm first