Need help with code for different sized image with text on mobile

Highlighted
New Member
1 0 0

My image with text on the top of my home page is full when I'm on my desktop, but on mobile it gets cut off. 

 

I tried adding 

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

to the end of my theme.scss.liquid, but didn't have much luck. 

 

My website is Ritualvessel.com, and I'm using the debut theme. 

 

I've attached pictures of the cropped photo below. Thank you! 

 

Banner issue full.PNGBanner issue cropped.jpg

0 Likes
Highlighted

Hello @RitualVessel,

You have to add different image for mobile

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 0 0

Hi,

Did you manage to get your imaged fixed not to cut off on mobile view?

I have the same problem that im trying to solve. If so can you please email me how you fixed it?

ndesigns101@gmail.com

0 Likes