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
How to create header image for responsive theme – Regular Headers

How to create header image for responsive theme – Regular Headers

Let me explain how the header works. Our widescreen template have a responsive header image. 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.

Our smart responsive headers keeps the image ratio in any monitor size and devices. When you are in editing, the header is not activated. So you will see it taller (if you are using a monitor smaller than 13″) or shorter (if you are using monitor 15″ +). Once the site is published, the smart header will be activated and it will calculate the width of your monitor and adjust the height of the image to match. So when you are in editing mode, you may see the image repeat. However, this will be gone once the responsive smart header kicks in.

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: , , , , , , ,