MOBILE IMAGE BANNER HOME PAGE PADDING

Store Design
1

On the mobile view of my home page, there is vertical white padding space after each banner image. I’ve tried resizing images and removing buttons, both of which have reduced the padding space, but I’d like to completely remove it. I’ve tried many different codes, none of which have worked. The desktop version is completely fine. There is no padding space, but my mobile view of the home page is not good.

2

provide url of your store and also share password if it is protected.

3

Hi @Akosua

PLease, share your store URL. Thanks!

4

www.mugitup.ca

5

go base.css
and find

Jack_Khan_Baba_0-1747176902979.png

img.hide.mobile-only

line no is 3655.
add
object-fit: cover !important;

so it looks like

Jack_Khan_Baba_1-1747177001858.png

img.hide.mobile-only {
display: block !important;
object-fit: cover !important;

}

6

Try adding this CSS in the Custom CSS area for that section:

@media (max-width: 767px) {
  .banner--mobile-bottom .banner__media {
    aspect-ratio: 3 / 4;
  }
}

DrewOswald_0-1747195786412.png
DrewOswald_0-1747195786412.png292×588 19.6 KB

7

@Akosua

In your Shopify dashbord > Go to online store > In your theme > Click edit code > Find base.css file
and put this code in the last base.css file and save changes.

@media only screen and (max-width: 768px) {
  .slideshow__media.banner__media.media,
  img.hide.mobile-only {
    padding: 0 !important;
    margin: 0 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

Thanks!

8

Hi @Akosua

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media (max-width: 767px) {
    .slideshow__media.banner__media.media {
    padding: 38% 0 !important;
}
}

Result

DaisyVo_0-1747215024636.png
DaisyVo_0-1747215024636.png379×671 122 KB

Best,

DaisyVo

9

Hi there,

This removed the padding space but cut off the images in terms of width. I’ve updated my store again. It’s not the slideshow that I’m trying to fix. It’s just the mobile banner image on the home page.

Thank you!

10

Thank you, everyone!