Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
Can I customize the header height of widescreen responsive headers?

Can I customize the header height of widescreen responsive headers?

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

For examples:

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

Tags: , , , , , , , , ,