Home page Hero image not responsive - Debut Theme

lwdesigns
Tourist
5 0 1

Hello, 

I'm using the Debut theme and the home page hero image is not responsive and is cut off in mobile view.

Can anybody help me with this?

Any suggestions would be greatly appreciated

Site: tausi-beauty.myshopify.com/
Password: Tausi123

0 Likes
paramSoft
Shopify Partner
1598 255 712

Please place this code at the end of theme.scss

@media only screen and (max-width: 600px) {
.hero__inner {
    padding: 102px;
}
.hero {
    height: unset;
    background-size: contain;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
Zworthkey
Shopify Partner
332 18 57

Hi, pls mark which image is cut off

Thank you.

0 Likes
Pallavi
Shopify Expert
1118 146 178

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

div#Hero-hero-1 {
height: 50vw !important;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
lwdesigns
Tourist
5 0 1

Thank you, I'll try it

0 Likes
lwdesigns
Tourist
5 0 1

It's the main hero image right underneath the navigation bar at the top

0 Likes
lwdesigns
Tourist
5 0 1

@paramSoft 

This worked, thanks so much

paramSoft
Shopify Partner
1598 255 712

@lwdesigns Thank you for the update.

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes