MOBILE IMAGE BANNER HOME PAGE PADDING

Store Design

Topic summary

A user is experiencing unwanted vertical white padding between banner images on their mobile homepage (www.mugitup.ca), while the desktop version displays correctly. Despite attempting image resizing and button removal, the padding persists.

Proposed Solutions:

Multiple community members offered CSS fixes targeting the base.css file:

  • Jack_Khan_Baba: Add object-fit: cover !important; to img.hide.mobile-only (line 3655)
  • DrewOswald: Apply custom CSS with aspect-ratio: 3 / 4 for mobile banner media
  • topnewyork: Comprehensive media query targeting slideshow and mobile images with padding/margin resets
  • DaisyVo: Add padding adjustment to .slideshow__media.banner__media.media

Current Status:

The user tested DaisyVo’s solution, which successfully removed padding but caused image width cropping. They clarified the issue affects banner images specifically, not the slideshow section. The user thanked contributors but the problem remains unresolved, requiring further CSS refinement to eliminate padding without distorting image dimensions.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
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.

1 Like
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!