How can I correct the mobile view and image cropping in Shopify?

[niceeee]

how to fix this one because the image in the slider banner is crop and also the decrease the gap between the bullet and the slidebanner

url: https://makerlab-electronics-ph.myshopify.com/

[INA_MSWEB · Accepted solution]

Hi @niceeee 

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

<style>

.slider-mobile-gutter .media > img {object-fit: contain !important; object-position: top center !important;}

@media screen and (max-width: 749px) {

.banner--mobile-bottom .slideshow__text.banner__box {display: none !important;}

}

@media screen and (max-width: 500px){

.slideshow__media.banner__media.media {height: 175px !important;}

}

</style>

Regards,

San