Image with text overlay doesn't resize properly on mobile

Solved

Hey guys,  I need help to fix this issue. The image with text looks fine on desktop:

 

DesktopDesktop

 

On mobile, the babies are cut-off. Why doesn't it resize accordingly?

 

MobileMobile

0 Likes
0 Likes
Jasoliya
Shopify Expert
4299 569 1073

This is an accepted solution.

Hi @Yugen 

Follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

 @media only screen and (max-width: 767px) {
#shopify-section-1564368663887 .hero{ background-size: contain; }
}

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Ninthony
Shopify Partner
1976 296 784

You may also want to add a background-color of white to @Jasoliya's code, because it will show a grey background behind the picture too. 

 

 @media only screen and (max-width: 767px) {
    #shopify-section-1564368663887 .hero{ 
    background-size: contain;
    background-color:white
 }
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
GeeEazy
New Member
3 0 0

Hi there, i tried this and it did absolutely nothing on mobile? Please help

0 Likes
Jasoliya
Shopify Expert
4299 569 1073

send your store link and section name

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Rohitparakh
New Member
2 0 0

you need to change the section number according to your website

 

0 Likes
alyssamae
New Member
6 0 0

I see that I have to change the section number for my website, how do I find what section number to enter to make this work? Thanks!

0 Likes
Jasoliya
Shopify Expert
4299 569 1073

You can find number id by inspect element on section on front side. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
LycheeLifeUK
New Member
1 0 0

Hi, this hasn’t worked for our store. Could it be that the section number should be different?  Any advice would be greatly appreciated. 
Thanks
Hannah

0 Likes