Optimizing banner for mobile desktop

[zvevda]

Hi there 

When I switch from desktop to mobile my homepage banner is off-center and I'm not sure how to fix this. If someone could help me i'd appreciate it. Here's the link to my store. 

https://zvevda.myshopify.com/

[squadkin · Accepted solution]

Hello @zvevda ,

You can use CSS Object attribute to manage the banner image size. 

Add the Below code in your CSS file from assets => theme.scss.liquid or theme.scss.css file.

body {
    &.template-index {
        .hero {
            .hero__image {
                @media screen and (max-width:768px){
                     -o-object-fit: contain;
                     object-fit: contain;
                     -o-object-position: center!important;
                     object-position: center!important;
                 }
            }
        }
    }
}

output:

Thanks

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on support@squadkin.com regarding any help
Shopify Expert | Whatsapp : +91 6356882809

[zvevda]

Thank you that worked!