want to fit banner image on mobile view

[Advertfox]

Hi,

i have made mobile banner with standard size but it's not fitting properly. however it fits perfectly on desktop view. i tried several codes but unfortunately it's not working.

link: https://advertfox.myshopify.com/

pass: advertfox

[LizHoang]

Hi @Advertfox 

You can follow the instruction here :

1. Go to Shopify > Online store > theme > customize

2. Click to Settings > Custom CSS > Paste this code to the section and save.

.banner--adapt, .banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
   width: auto!important;
    height: 100%!important;
     max-height: none!important; 
}
}

[DaisyVo]

Hi @Advertfox ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (max-width: 768px){
.slideshow__media.banner__media.media.mob {
    height: 500px;
}
.slideshow__media.banner__media.media.mob img {
    width: 100% !important;
    height: auto !important;
}
}

Here is the result:

Please let me know if it works!

Best,

Daisy

[Advertfox]

Hi,

thank you for your help, i did it but it shows little gray space after the image

[Dan-From-Ryviu]

Please add more this code to solve the issue with gray space

@media (max-width: 749px) {
    .slideshow__slide.grid__item {
        overflow: hidden;
    }
}

[Advertfox]

Hi,

it's still showing the gray space 

[Dan-From-Ryviu]

Please update the code 

@media (max-width: 749px) {
    .slideshow__media.banner__media.media.mob { min-height: 479px; }
    .slideshow__slide.grid__item {
        overflow: hidden;
    }
}

[Advertfox]

i added it in custom CSS in theme settings, also tried in my base.css file as well but it didn't worked so i removed it 

[Dan-From-Ryviu · Accepted solution]

Please update the code and check again

@media (max-width: 749px) {
    .slideshow__media.banner__media.media.mob { 
        min-height: 479px !important; 
        height: auto !important; 
    }
    .slideshow__slide.grid__item {
        overflow: hidden;
    }
}

[Advertfox]

that really worked, thanks a lot Dan 🙂

[Advertfox]

all good now 🙂