Solved

Refresh theme - Fixed background position on mobile version

Edgard22
Excursionist
57 3 5

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 ! 

 

Screenshot 2024-04-27 09.16.03.png

Accepted Solution (1)
MichalKopec
Shopify Partner
55 9 8

This is an 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;
}

 

A developer with more than 10 years of full stack experience. For work inquiries, please send me a private message.

View solution in original post

Replies 5 (5)

MichalKopec
Shopify Partner
55 9 8

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;
}
A developer with more than 10 years of full stack experience. For work inquiries, please send me a private message.

SAN_MSWEB
Shopify Expert
1121 134 141

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

 

SAN_MSWEB_0-1714215166038.png

 

@media (max-width:749px){

img {height:345px !important}

}

 

Hope it helps.

 

Do let me know in case of any concerns.

 

Regards,

San

 

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Edgard22
Excursionist
57 3 5

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

Screenshot 2024-04-28 09.21.21.png

MichalKopec
Shopify Partner
55 9 8

This is an 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;
}

 

A developer with more than 10 years of full stack experience. For work inquiries, please send me a private message.
Edgard22
Excursionist
57 3 5

Thanks a lot !