Refresh theme - Fixed background position on mobile version

[Edgard22]

Hi 

Hope you are doing well 

Website : https://f01138-5e.myshopify.com/ 

i've a problem with my fixed background position on mobile

On desktop, it's perfect but on mobile, we only see the tree

someone know how to help me ?

Thanks a lot ! 

[MichalKopec]

Hi Edgard, one of the ways to adjust the behaviour is to change how the theme handles vertical stretch of the image: 

.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button), .animate--fixed>svg:not(.zoom):not(.deferred-media__poster-button) {
    height: 56rem!important;
}

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

Here is the solution:

Go to Themes > Customise > go to that section and paste this code here

@media (max-width:749px){

img {height:345px !important}

}

Hope it helps.

Do let me know in case of any concerns.

Regards,

San

[Edgard22]

Hi, it works for the photo but the logo is deformed on mobile version, any idea ? thanks to you 🙂 

[MichalKopec · Accepted solution]

That's because all images on mobile now have a fixed height of 345px. I recommend the custom css I mentioned before: 

.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button), .animate--fixed>svg:not(.zoom):not(.deferred-media__poster-button) {
    height: 56rem!important;
}

[Edgard22]

Thanks a lot !