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

[mayatranquila]

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

This is how it looks on mobile view:

[StevenT_A7]

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 !

[Dan-From-Ryviu]

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