Shopify themes, liquid, logos, and UX
Our website banner gets cut off on mobile. We're using the Debut theme. What's the code to fix this?
https://delectablebyzarlajane.com/
Solved! Go to the solution
This is an accepted solution.
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/
This is an accepted solution.
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/
Thank you!
it's my pleasure to help us
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
sorry for that any issue
can you please share your issue images
Hi,
I also face this problem on desktop despite using all banners at same size, can you advise?
2048 x 750
I have tried your code nothing happened.
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.
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
On my device, it is looking perfect.
You can increase your image size.
Thank You.
@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.
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?
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.
yes all device is working fine
Hi all i faced this issue again, are you guys able to offer me a permanent solution to solve this? thank you
hii, @USClinicals
Kindly share your site URL so,
I can solve your issue.
Thank You.
Click on the section height option under banner image and choose adapt to image.
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
sorry for that issue but your image to smaller please upload better
Thank you. I have uploaded bigger now. Let me know what to do next please.
thank you!
yes i have check again still same image
hello again, i changed it again now. can you check?
thank you so much
thanks for update but doesn't any change
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024