Sense Theme - Resize banner between desktop and mobile

Store Design
,

Topic summary

A user is experiencing an issue where their homepage banner on the Sense theme gets cropped on mobile devices instead of resizing properly. The banner displays correctly on desktop but appears cut off on mobile screens.

Three solutions were proposed:

  1. CSS height adjustment (DaisyVo): Add custom CSS to set a fixed height (16rem) for the banner on mobile devices via Theme Settings > Custom CSS.

  2. Alternative CSS approach (websensepro): Similar solution using a slightly different height (17rem) and targeting the banner class, implemented through the theme.css/base.css file.

  3. Dual banner method (Dan-From-Ryviu): Create separate image banners optimized for desktop and mobile, then use CSS media queries to hide the desktop version on mobile and vice versa.

All solutions involve adding CSS code to control banner display behavior on mobile devices. The discussion remains open with no confirmation from the original poster about which solution was implemented or successful.

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

Hi @FredyP

You can create separate image banners for mobile and desktop, then add those custom codes below to hide desktop banner on mobile and vice versa.

Add this code to Custom CSS of destop’s banner.

@media (max-width: 749px) {
.banner { display: none; }
}

Ad this code to Custom CSS of mobile’s banner

@media (min-width: 750px) {
.banner { display: none; }
}