How can I resize my homepage image (main) banner for mobile view?

Store Design

Topic summary

A user’s homepage banner image displays correctly on desktop but crops the left and right edges on mobile devices, making parts of the image invisible.

Solution Provided:
Two community members offered CSS fixes to resolve the mobile display issue:

  • Method 1: Add custom CSS through Online Store → Customize → Settings → Custom CSS, targeting the banner media with object-fit: contain and height: auto properties for screens under 749px width.

  • Method 2: Edit the theme’s base.css file directly by adding similar CSS rules with a min-height: 19rem specification for the banner content.

Outcome:
The original poster confirmed the solution worked successfully. Both approaches use media queries to adjust how the banner image scales on mobile screens, ensuring the full image remains visible without cropping.

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

Hello, I hope everyone is doing well! Currently, I love how the main image banner, on my homepage, looks on the desktop screen, however, on mobile screens it isn’t width enough so you can’t see the end sides (right and left) of the image. I’ll appreciate any suggestion on how to fix this issue. Thanks in advance!

Url: https://legacymacramestudio.com/

WhatsApp Image 2024-08-01 at 13.28.23_ef78964d.jpg
WhatsApp Image 2024-08-01 at 13.28.23_ef78964d.jpg1068×1600 105 KB

1 Like
2

Go to your online store → customize → settings → custom css and paste this code there

@media screen and (max-width: 749px) {
    .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 16rem !important;
    }
div.slideshow__media.banner__media.media img {
    height: auto !important;
    object-fit: contain;
}
}

AsadMahmood_0-1722535049682.png
AsadMahmood_0-1722535049682.png393×676 90.9 KB

1 Like
3

Thank you so much! It worked!

4

Hi @Patwalters ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1722538196502.png
BSSCommerceB2B_0-1722538196502.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media screen and (max-width: 749px) {
    .slideshow__media.banner__media.media img {
        object-fit: contain !important;
        height: auto !important;
    }
    .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 19rem !important;
    }
}

Step 3: Save your code and reload this page.

=>> The result:

BSSCommerceB2B_1-1722538294558.png
BSSCommerceB2B_1-1722538294558.png667×860 192 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

5

Glad it worked for you