Our responsive header is dynamic. Unlike Weebly’s standard header image, the height is fixed no matter what size monitor/device you are using, our themes have a truly responsive header. It measures the width of the monitor and calculate to adjust the height accordingly.
The css codes in the theme only controls the height of the header when in editing. Once the site is published, the dynamic responsive header will than be activated. Each header is set to a specific ratio. The theme will keep the same image ratio no matter what monitor size you are using. Due to the complexity of responsive header, the height of the header cannot be changed. As such, header image height was never listed as an “customizable area” in our theme description.
Here is the breakdown of the header image ratio for different page layout:
1) Landing page = 2.7 width x 1 height (example for every 1px in height the width should be 2.7px)
2) Tall Header = 4.1 width x 1 height
2) Short Header = 6.7 width x 1 height
If my monitor is 1366px, my landing page header image height will be 1366/2.7 = 503px
If my monitor is 1920px, my tall header image height will be 1920/4.1 = 468px