Refresh Theme - Banner photo size on mobile devices

Solved

Refresh Theme - Banner photo size on mobile devices

elmar6798
New Member
4 0 0

Hello. Could you please help me to adjust banner photo size in mobile devices? Website: lmar-auto.com

Now it looks cropped form both sides in mobile devices.

Thanks in advance.

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2139 616 519

This is an accepted solution.

Hey @elmar6798,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 749px) {
    .banner__media.media > img {
        object-fit: contain !important;
        position: relative !important;
    }
    
    .banner__media.media {
        height: 100% !important;
        position: relative !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1717084208271.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
2139 616 519

This is an accepted solution.

Hey @elmar6798,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 749px) {
    .banner__media.media > img {
        object-fit: contain !important;
        position: relative !important;
    }
    
    .banner__media.media {
        height: 100% !important;
        position: relative !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1717084208271.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
elmar6798
New Member
4 0 0

Thanks a lot, it works!

elmar6798
New Member
4 0 0

Do you know how to reduce size of the logo in mobile devices?

elmar6798
New Member
4 0 0

Found it! 🙂