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:
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 !
Hi @mayatranquila Could you share the link to your page so I can check?