How can I fix this hero alternative banner to make it fulll width on desktop?

Store Design

Topic summary

A user is experiencing a layout issue where their hero alternative banner displays correctly on mobile but appears cut in half on desktop. Screenshots show the banner is truncated on desktop view while mobile rendering works as intended.

Proposed Solutions:

  • Option 1: Increase the banner height setting from the current 40vh to 60vh or 100vh through the theme editor’s Hero alternative section settings

  • Option 2: Override the fixed height using custom CSS that removes height restrictions on desktop (min-width: 750px) and applies padding instead, allowing the banner to auto-adjust based on content

The root cause appears to be the fixed 40vh (viewport height) setting, which limits the banner to only 40% of screen height on desktop, causing content overflow.

Status: The discussion remains open, with one responder requesting the page URL for further investigation.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

It looks great on mobile view but on desktop view its cut in half for some reason. How can I fix this?

Screen Shot 2025-05-28 at 3.44.50 PM.png
Screen Shot 2025-05-28 at 3.44.50 PM.png1440×809 73 KB

This is how it looks on mobile view:

Screen Shot 2025-05-28 at 3.48.10 PM.png
Screen Shot 2025-05-28 at 3.48.10 PM.png754×619 46.9 KB

2

Hi @mayatranquila ,

It looks-a-like your Hero section looks cut off on desktop, while it looks great on mobile, the likely issue is with the Banner height set to a fixed 40vh (viewport height). On desktop, that restricts the hero’s height to only 40% of the screen height causing the large headline to overflow or be cut off. To fix this you can follow the below steps :-

Option 1: Increase the Banner height
This is the easiest fix.

  • Go to the theme editor > select the Hero alternative section.
  • Increase the Banner height from 40vh to something larger like 60vh or even 100vh depending on your design needs.

Try:

  • 60vh for moderate space
  • 100vh for full screen

Option 2: Switch to auto height using Custom CSS
If you want the banner to grow based on content, you can override the fixed height entirely:

Add this in the Custom CSS box:

@media screen and (min-width: 750px)

{
.hero-alternative

{
height: auto !important;
min-height: unset !important;
padding-top: 80px;
padding-bottom: 80px;
}
}

This will help to :-

  • Removes the height restriction on desktop
  • Adds top/bottom padding for spacing
  • Keeps mobile unaffected (since mobile styling is already working)

Please let me know if you need any further clarifications

Thanks !

3

Hi @mayatranquila Could you share the link to your page so I can check?