Grey space around image banner

Grey space around image banner

peakclo
Excursionist
24 0 4

How do I get rid of the grey space on my image banner. When I use other paramaters on my object-fit the image looks squashed onn mobile view but fine on desktop. www.peakclo.com. Dawn theme.

 

 

.banner__media.media > img {
    object-fit: contain!important;
    border-radius: 0%;
    overflow: hidden;
}

peakclo_0-1728384401351.png

 

Replies 3 (3)

Rahul_dhiman
Shopify Partner
600 118 118


Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-image-banner.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 17rem !important;
}
}

result
9.png

If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
peakclo
Excursionist
24 0 4

It works great on mobile, how can I do the same for desktop view

Rahul_dhiman
Shopify Partner
600 118 118

11.pngcan't see any grey space in desktop.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167