FROM CACHE - en_header

Debut Theme Banner Cutting Off On Mobile

Solved
FragranceCanada
Tourist
5 1 1

Hi my banner is cutting off on mobile how can I fix this with a code please help!

www.fragrancecanada.ca

Accepted Solutions (2)

Accepted Solutions
RichardNguyen
Shopify Partner
1389 196 877

This is an accepted solution.

Hi,
Add the custom CSS code below to fix

@media (max-width: 767px) {
.hero {background-size: contain !important; height: 56.25vw !important; }
}

PageFly- Advanced Shopify Page Builder - Empowering 100.000+ active merchants.


Check our Evergreen List of Best Platforms To Sell Online.


Or our new series to Build The Perfect Mobile-Friendly Store.

View solution in original post

FragranceCanada
Tourist
5 1 1

This is an accepted solution.

It worked THANKS!

View solution in original post

Replies 9 (9)
RichardNguyen
Shopify Partner
1389 196 877

This is an accepted solution.

Hi,
Add the custom CSS code below to fix

@media (max-width: 767px) {
.hero {background-size: contain !important; height: 56.25vw !important; }
}

PageFly- Advanced Shopify Page Builder - Empowering 100.000+ active merchants.


Check our Evergreen List of Best Platforms To Sell Online.


Or our new series to Build The Perfect Mobile-Friendly Store.

FragranceCanada
Tourist
5 1 1

This is an accepted solution.

It worked THANKS!

divadvani
New Member
2 0 0

hii where do I add this code 

missniecy
New Member
1 0 0

Hi Richard, where should the code go to fix this issue?

woesmarketing
New Member
1 0 0

Hey Richard!

Does this code is for resizing the view on smartphone ?

If yes, where do I add this code ?

Many thanks,

WM

aschuetz
New Member
1 0 0

go to the code --->snippets---> Media.liquid 

A the bottom (row 79 in debut) insert: (max-width: 767px) {
.hero {background-size: contain !important; height: 56.25vw !important; }

 

hope it helps, worked for me 

BensonapparelCA
New Member
1 0 0

Hi - I tried using that code and it didn't work.

Instead it would just add the coding in as is as a text on the page.screenshotscreenshot

Jmck
New Member
1 0 1

I am having the same issue, where do I add this code?

My store website is:

 

https://private-covid-test.myshopify.com/

 

Thanks,

James

tstouch252
New Member
1 0 0

Hi Richard,

I have tried the code and its not working for mobile on the header and towards the bottom. HELPPPPPP please! 

Thanks 

tstouch252_0-1625361627608.png     

tstouch252_1-1625361725915.png