Solved

Resize 'image with text overlay' for mobile. Debut Theme

myjerseyposter
Excursionist
32 0 16

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

Screen Shot 2020-11-19 at 1.31.49 PM.png

mobile

Screen Shot 2020-11-19 at 1.32.06 PM.png

 

 

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@myjerseyposter 

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

 

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 26 (26)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@myjerseyposter 

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

 

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
myjerseyposter
Excursionist
32 0 16

amazing help again sir. all the best

KetanKumar
Shopify Partner
36839 3635 11972

@myjerseyposter 

Thanks for update and support.

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
Effielah23
Excursionist
11 0 2

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. 

KetanKumar
Shopify Partner
36839 3635 11972

@Effielah23 

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.

 

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
Effielah23
Excursionist
11 0 2
Effielah23
Excursionist
11 0 2
KetanKumar
Shopify Partner
36839 3635 11972

@Effielah23 

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

 

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
Effielah23
Excursionist
11 0 2

Thank you! It worked!

KetanKumar
Shopify Partner
36839 3635 11972

@Effielah23 

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
NextPaige
Visitor
1 0 1

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

 

KetanKumar
Shopify Partner
36839 3635 11972

@NextPaige 

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

 

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
cbee24
Excursionist
15 0 4

Hi there!

I'm having similar issues, but my issue is on the desktop. Part of the image gets cut off on the top and bottom on desktop, but looks good on mobile. The only problem I have with the mobile version is that the text is too high. On desktop the text is at a good place. 

 

website: thekosmicchild.com

PW: iathan

 Screen Shot 2021-08-20 at 4.51.08 PM.pngScreen Shot 2021-08-20 at 5.12.12 PM.png

Thanks in advance!! 

chelsea1powell
Tourist
4 0 1

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.

www.sonnyboyco.com

 

Can you help? Thank you

KetanKumar
Shopify Partner
36839 3635 11972

@chelsea1powell 

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

 

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
chelsea1powell
Tourist
4 0 1

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.

Screen Shot 2021-04-19 at 3.21.31 PM.png

Can you help me fix this?

Thank you!

KetanKumar
Shopify Partner
36839 3635 11972

@chelsea1powell 

its was depend on mobile aspect ration upload bigger size or customization mobile and desktop different 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
emenain
Tourist
5 0 2

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.

https://artisstory.com/

pw: crahly

Thank you!

KetanKumar
Shopify Partner
36839 3635 11972

@emenain 

sorry for that

i have check all good if you need any issue please share issue 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
rissaTAI
Visitor
1 0 0

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.

 

Screenshot 2021-07-16 at 1.43.32 AM.png

However the display on mobile got cut off at the bottom of the image as reflected on screenshot.

Screenshot 2021-07-16 at 1.45.23 AM.png

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.

shianne87
Shopify Partner
4 0 2

WJBJ Sceenshot 2021-10-20.pngHi there! 

I used your code to resize for mobile and it worked perfectly but now I have white bars on the left and right of the image on my desktop view. Is there a way to fix it? I've attached an image. Thanks for your help!

 

KetanKumar
Shopify Partner
36839 3635 11972

@shianne87 

yes please provide store url.

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
shianne87
Shopify Partner
4 0 2

Thanks for responding!

Site URL:

https://waist-jewel.myshopify.com/

PW:

WJBJGlowup2021

KetanKumar
Shopify Partner
36839 3635 11972

@shianne87 

yes please try this 

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
shianne87
Shopify Partner
4 0 2

Hi There!

 

Sorry for the late response. I tried it and it DID work but the whole image on both mobile & desktop was encased in a white box, removed the linked button, the overlayed text, and shifted the mobile image to the left. I ended up having to remove it in order to preview the site to a client.  Played with some more and ended up having to completely rebuild 🤦🏾‍♀️.

 

I have a few other issues I'm trying to fix as well but I just can't seem to locate the piece of code OR get the site to cooperate. Is it possible for us to connect in private messages?

graphixguru
Visitor
2 0 0

Hello, I'm currently having the same issues with a site I'm working on. Can you help me?