Image with text overlay doesn't resize properly on mobile

Solved
Highlighted

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
Highlighted
Highlighted
Shopify Expert
3692 550 893

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Shopify Partner
1435 194 488

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 and accept as 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
1 Like
Highlighted
New Member
3 0 0

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

0 Likes
Highlighted
Shopify Expert
3692 550 893

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
2 0 0

you need to change the section number according to your website

 

0 Likes
Highlighted
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
Highlighted
Shopify Expert
3692 550 893

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
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
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