Debut Theme Banner Cutting Off On Mobile

Solved
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

0 Likes

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; }
}
CRO Expert at PageFly - Advanced Shopify Page Builder.
- Use the Christmas template to skyrocket your sales.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group | Youtube.
- [Tutorial] Get more tips on using PageFly to soar sales this season
0 Likes
Tourist
5 1 1

This is an accepted solution.

It worked THANKS!

0 Likes
New Member
2 0 0

hii where do I add this code 

0 Likes
New Member
1 0 0

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

0 Likes
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

0 Likes
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 

0 Likes
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

0 Likes
New Member
1 0 0

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

My store website is:

 

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

 

Thanks,

James

0 Likes