Set height of Image banner relativ to browser window (Dawn theme)

Store Design
,

Topic summary

A user working with Shopify’s Dawn theme wants to make Image Banner sections responsive to browser window height. Currently, the theme offers only three fixed height options (Small, Medium, Large), which don’t scale appropriately across different screen sizes—particularly appearing too small on large desktop displays.

Desired Solution:

  • Set Image Banner height dynamically as: Browser window height minus 120 pixels
  • This would create a more responsive, full-screen effect across devices

Current Status:

  • The user identified a relevant CSS value (72rem) that controls banner height
  • They need help formulating the correct code to replace this fixed value with a calculation based on viewport height
  • GemPages support requested the store URL to provide specific guidance
  • The user shared credentials via private message

Note: The user clarifies they are a graphic designer with limited development experience but willing to edit code with clear instructions. Screenshots were shared showing current vs. desired appearance.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hello, we are using Dawn theme.
Our Homepage is made of multiple Image Banner sections stuck one after the other.

I can set the height of the Image Banner to 3 values (Small, Medium, Large). Large is fine on smaller devices but on larger desktop screens it would be nice to have it even larger. Setting the Image Banner to ‘Adapt section height to first image size’ does not arrange my problem, especially when it comes to mobile view.

How can I set the height in relation to the navigator browser window height?
Ideal would be: browser window minus 120pix = Image Banner heigt

(I am not a developer but graphic designer, but can do some code editing if I get clear instructions)

here is how it looks now:

Screenshot 2022-12-23 at 14.18.54.jpg
Screenshot 2022-12-23 at 14.18.54.jpg1953×1327 227 KB

This is what I would like to achieve:

Screenshot 2022-12-23 at 14.18.54 copy.jpg
Screenshot 2022-12-23 at 14.18.54 copy.jpg1953×1327 221 KB

2

Hello @Designbureau

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

3

Hello, I have shared the store url and password in a private message. did you get it?

4

Hello again,
I am not a developer, but I I think I found the value I want to replace in the CSS file.
I am just not able to formulate the code that gives me the result expected.
The 72rem should be replaced by a calculation like this:
Browser window height - 240pix

thank you

Screenshot 2023-01-13 at 14.39.24.jpg
Screenshot 2023-01-13 at 14.39.24.jpg2836×1900 494 KB