MOBILE IMAGE BANNER HOME PAGE PADDING

[Akosua]

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.

[Jack_Khan_Baba]

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

[Akosua]

www.mugitup.ca

[Jack_Khan_Baba]

go base.css
and find 

img.hide.mobile-only 

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

so it looks like

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

}

[DrewOswald]

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

[Made4uo-Ribe]

Hi @Akosua 

PLease, share your store URL. Thanks!

[topnewyork]

@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!

[Akosua]

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!

[DaisyVo]

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 

Best,

DaisyVo

[Akosua]

Thank you, everyone!