Why does my full width header image look different in different monitor size?

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

Tags: , , , , , ,