Optimizing banner for mobile desktop

Solved
zvevda
New Member
3 0 2

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
Excursionist
11 4 3

This is an 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:

Screenshot_1.png

 

 

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

 

0 Likes
zvevda
New Member
3 0 2

Thank you that worked!