Solved

Banner Gets Cut Off On Mobile (Debut Theme)

ives
Tourist
9 0 3

Our website banner gets cut off on mobile. We're using the Debut theme. What's the code to fix this?

https://delectablebyzarlajane.com/

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@ives 

sorry for this issue try this code

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) {
#shopify-section-hero .hero--large {height: 140px;}
}

 

 https://www.mojoin.com/show-shopify-banner-image/
also, you have try this different image desktop and mobile

https://www.mojoin.com/show-shopify-banner-image/

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 25 (25)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@ives 

sorry for this issue try this code

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) {
#shopify-section-hero .hero--large {height: 140px;}
}

 

 https://www.mojoin.com/show-shopify-banner-image/
also, you have try this different image desktop and mobile

https://www.mojoin.com/show-shopify-banner-image/

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ives
Tourist
9 0 3

Thank you!

KetanKumar
Shopify Partner
36839 3635 11972

@ives 

it's my pleasure to help us

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kereshma
Visitor
2 0 2

Hi my banner also gets cut off using a phone and I'm also using the Debut theme. I used the code you posted but it didn't work for me.

my shop is : Kandelaarco.com

Thank you

KetanKumar
Shopify Partner
36839 3635 11972

@Kereshma 

sorry for that any issue

can you  please share your issue images

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
USClinicals
Tourist
7 0 2

Hi,

I also face this problem on desktop despite using all banners at same size, can you advise?

2048 x 750

USClinicals_0-1630913720209.png

I have tried your code nothing happened.

 

KetanKumar
Shopify Partner
36839 3635 11972

@USClinicals 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
USClinicals
Tourist
7 0 2

@KetanKumar  Us-clinicals.com

Zworthkey
Shopify Partner
5581 642 1565

hii, @USClinicals 
Paste this code on top of the theme.scss file.

@media only screen and (min-width: 992px) {
.item.item--85370d67-2cb3-4a75-a485-06c93399d92e.item--text-light.original-height.js-section-container.is-selected {
    margin-top: 101px !important;
}
}

Thank You.

USClinicals
Tourist
7 0 2

Hi @Zworthkey still cropped off, can you check again?

 

Zworthkey
Shopify Partner
5581 642 1565

@USClinicals 
On my device, it is looking perfect.
You can increase your image size.
Thank You.

USClinicals
Tourist
7 0 2

@Zworthkey I dont but i still see some cropped off at the bottom, mobile view also being cropped off, can you help on this as well?

Size: 702 by 450

Thank you so much.

KetanKumar
Shopify Partner
36839 3635 11972

@USClinicals 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
USClinicals
Tourist
7 0 2

hi @KetanKumar I am using Chrome, chrome display 1920 x 1080.

Please check on your mobile view, i think the desktop on is fine more of the mobile view now.

KetanKumar
Shopify Partner
36839 3635 11972

@USClinicals 

yes all device is working fine 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
USClinicals
Tourist
7 0 2

USClinicals_0-1632284403602.png

Hi all i faced this issue again, are you guys able to offer me a permanent solution to solve this? thank you

 

USClinicals
Tourist
7 0 2

Hi Let me know if you guys can offer a solution @KetanKumar . Thank you 

Zworthkey
Shopify Partner
5581 642 1565

hii, @USClinicals 
Kindly share your site URL so,
I can solve your issue.
Thank You.

Razzak
Visitor
1 0 0

Click on the section height option under banner image and choose adapt to image. 

mimitoo
Tourist
3 0 2

hello there! i'm having problems with my image on banner. it is getting cropped on desktop mode. can someone please help?

Thank you!

WWW.burstingcrystals.com

KetanKumar
Shopify Partner
36839 3635 11972

@mimitoo 

sorry for that issue but your image to smaller please upload better 

KetanKumar_0-1634582943095.png

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mimitoo
Tourist
3 0 2

Thank you. I have uploaded bigger now. Let me know what to do next please.

thank you!

KetanKumar
Shopify Partner
36839 3635 11972

@mimitoo 

yes i have check again still same image

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mimitoo
Tourist
3 0 2

hello again, i changed it again now. can you check? 

thank you so much

KetanKumar
Shopify Partner
36839 3635 11972

@mimitoo 

thanks for update but doesn't any change 

KetanKumar_0-1634784931368.png

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing