Debut Theme Hero Section Background Image

[VictorValtchev]

Hello, 

While working on Debut theme I have encountered a problem with the Hero section and how it displays on mobile and desktop. Now on desktop I really like how it stands but on mobile as you might already know it crops the background image. That is not big of a problem if I could only align it to the left so a better product can be displayed.

I entered a code for the section that makes good changes. 

@media screen and (max-width: 800px) {

     .hero.ratio-container{ background-size: 200% !important;

      max-height: 300px;  

     }

But how do I align the image to the left? So better products be displayed?

Website is: https://victorvaltchev.com/

[Joel_K · Accepted solution]

Hi @VictorValtchev 

Try adding the last line of CSS below. The positioning for the background image is being added to the DIV (inline CSS) rather than in the spreadsheet, but if you add !important it should override the center positioning for devices less than 800px wide.

@media screen and (max-width: 800px)
.hero.ratio-container {
    background-size: 200% !important;
    max-height: 300px;
    background-position: left center !important;
}

 Thanks!

[VictorValtchev]

It worked.You are a god among men. :D

I tried the background-position line before but without the !important. Didn't know it was for override. Learned something new today!

[JoeTopping]

Hi, I think I have a similar problem but I'm not understanding the thread. Where is the code supposed to be pasted?

My website is lancashirelocal.com and my hero image is cut off on mobile but looks perfect on desktop.

Any help would be greatly appreciated!

Thanks