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