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

Glad it worked for you