How to optimize banner size for desktop and mobile?

Solved
Shopify Partner
12347 1505 4467

Hello, @WinsonNg 

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

your store is password protect 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
New Member
2 0 0

Hi @KetanKumar 

Password is 1

0 Likes
Shopify Partner
12347 1505 4467

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
New Member
1 0 0

Thanks!

0 Likes
New Member
1 0 1

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

Shopify Partner
12347 1505 4467

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
New Member
3 0 0

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

 

IMG_0393.PNG

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

 

TIA

0 Likes
Shopify Partner
12347 1505 4467

@Halfsixclothing 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
New Member
3 0 0

Hey @KetanKumar 

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

 

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

 

0 Likes
Shopify Partner
12347 1505 4467

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes