Why does my widescreen header image look different when published?

When you are in editing mode, the header image will look different than the published version because of 2 reasons

1)In editing mode, you have the website builder tool bar on the left. So the website does not actually spend full width. When you publish the site, the tool bar will be gone so the site is display wider than in editing mode. Since the header spend the full width of the page, it will look bigger once the left hand side tool no longer there

1)When you are in editing, the responsive header is NOT ACTIVATED. 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: , , , ,