Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
Hi all. I am using the 'image with text overlay' section to demonstrate some product features through a photo (see photo below). On desktop it works perfectly, but on mobile the sides get cut off (see photo). Can I resize the photo only on mobile so nothing gets cut off?
Also, I use the 'image with text overlay' many other times on the landing page and hopefully we can fix this specific section and keep the others unchanged. Thank you in advance.
Store URL: https://myjerseyposter.com/
Photos:
desktop
mobile
Solved! Go to the solution
This is an accepted solution.
Thanks for post again
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-1605802304b4a93306 .hero--x-large {
height: 280px;
}
}
This is an accepted solution.
Thanks for post again
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-1605802304b4a93306 .hero--x-large {
height: 280px;
}
}
amazing help again sir. all the best
Thanks for update and support.
Hello,
I'm currently having a similar problem on my website as well, the image with text banner won't resize to mobile but when I try the code here to resize it, it actually leaves an unsightly white space between the banner and the header and the rest of the page, on both the mobile and the desktop view.
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question. 😊
Please share your site URL,
So I will check and provide a solution here.
thanks for more details. please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
@media only screen and (max-width: 749px) {
#shopify-section-hero-2 .hero--medium {
height: 90px;
background-size: contain;
background-color: #000;
}
}
Thank you! It worked!
it's my pleasure to help us
Hi,
I am having this same issue but that code is not working for me. It is my banner photo that I need to resize so it shows properly on mobile. My website is below.
Can you help? Thank you
thanks for post
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-1 .hero--large {
height: 170px;
background-size: contain;
}
}
Hi! Thank you for your help. It solved some of the problem but now I have two white bars on the left and right side of the banner image on mobile. See screenshot below.
Can you help me fix this?
Thank you!
its was depend on mobile aspect ration upload bigger size or customization mobile and desktop different image
Hello @KetanKumar - I am also having the same issue, I tried adding the code you posted but it didn't work for me.
My custom banner doesn't resize on any screen size - not just mobile, but if I make the screen size smaller on the desktop it cuts off the banner. would greatly appreciate your help.
pw: crahly
Thank you!
sorry for that
i have check all good if you need any issue please share issue image
Hi, I'm having a similar issue with the display on mobile phone.
https://tradersacademyonline.com/pages/workshop-copy
The image sizing is good on desktop.
However the display on mobile got cut off at the bottom of the image as reflected on screenshot.
I tried editing the code on featured-row.liquid under Sections folder but it does not work.
Could you kindly advise how I can change the height display on mobile and not affecting the desktop display?
Thank you.
Hello when using the debut them the picture overaly looks just fine on desktop but when on mobile wont resize . What is the correct code to fix this issue ?
Shopnextpaige.com
sorry for that issue can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
@media only screen and (max-width: 749px) {
#shopify-section-1628192623a5542125 .hero--medium {
height: 180px;
}
}
User | RANK |
---|---|
112 | |
86 | |
68 | |
68 | |
45 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022