Banner size for Mac devices

Topic summary

  • 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.

Summarized with AI on December 27. AI used: gpt-5.

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);
}