Problem: On Mac, the homepage hero banner doesn’t fill the screen, revealing the section below. The requester asked for a banner size that works across devices. Shop URL and password were shared; a screenshot was attached.
Suggested fix (not a fixed size): Apply CSS to make the banner adapt to the viewport height. Target the banner container (.banner–adapt) with height: calc(100vh - 38px).
How to apply: Add this CSS in the banner’s Custom CSS via Online Store > Themes > Customize.
Rationale: 100vh equals the full browser viewport height; subtracting 38px likely compensates for theme header/padding so the banner appears full-screen on Mac while remaining responsive on other devices.
Status: No confirmation yet from the requester that the change resolves the issue; further testing on the provided store is implied.
Key materials: 1 screenshot illustrating the gap; 1 CSS snippet central to the proposed solution.
Hi,
Can anyone help me understand what should be the right size for a banner, so that it will be a full screen also for Mac?
My first homepage banner is fine on other devices, but on Mac you can see the section bellow, which doesn’t look good. Is there a size that I can use that will suite both ?
SHOP: https://bentobay.de/
Password: bawvay
Thank you in advance
Hi @Daniel19901
You can add this code to Custom CSS section of that banner in Online store > Themes > Customize to check
.banner--adapt {
height: calc(100vh - 38px);
}