want to fit banner image on mobile view

Store Design

Topic summary

A Shopify store owner encountered an issue where their mobile banner image wasn’t fitting properly on mobile view, despite displaying correctly on desktop. The banner showed unwanted gray space below the image.

Initial Solutions Attempted:

  • Multiple CSS approaches were suggested by community members (LizHoang and DaisyVo)
  • DaisyVo’s code successfully adjusted the banner sizing but left residual gray space

Final Resolution:

  • Dan-From-Ryviu provided iterative CSS solutions targeting the .slideshow__media and .slideshow__slide elements
  • The working code included min-height: 479px !important and height: auto !important with overflow: hidden for mobile viewports (max-width: 749px)
  • Code was added to the Custom CSS section in Theme Settings

Outcome: Issue resolved. The banner now fits properly on mobile without gray space. The solution required media queries with !important flags to override existing theme styles.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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

CaptureA.JPG
CaptureA.JPG655×546 34.5 KB

2

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; 
}
}
3

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:

DaisyVo_0-1736216815204.png
DaisyVo_0-1736216815204.png445×803 133 KB

Please let me know if it works!

Best,

Daisy

1 Like
4

Hi,

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

5

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

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

Hi,

it’s still showing the gray space

7

Please update the code

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

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

9

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;
    }
}
1 Like
10

that really worked, thanks a lot Dan :slightly_smiling_face:

11

all good now :slightly_smiling_face:

1 Like