Hero Row Header - Viewport Height

The hero image is inserted in three different sizes - one for each device type. The images are inserted using the HTML5 <picture> element rather than as background images so that it can be fixed for scroll over on iPad and iPhone.
The heading, text block and link are positioned using an invisible grid overlay by inserting row and column numbers and column span. The grid items become centered when viewed on a mobile phone.
Images
The images used in this demo are 1600px, 1200px and 800px wide respectively. The smallest image will download fast on a phone and give retina quality in portrait mode.
Background Image
Background images should be avoided at all costs on responsive pages since the image file is way too big to download over wireless cell phome connections.
This widget can be set to 100vh which means that it fills the height of the viewport no matter what size it is. It is fixed in position to allow the content to scroll over it. It gives the appearance of a background image but doesn't require a huge file to be downloaded on tablets and smart phones.
Logo
The logo is optional and has controls for setting the image width and its position in relation to the top/bottom and left/right of the image.
Animation
There is a checkbox to turn on the optional animation of the heading, text block and link. Each item has a control for setting both the animation time and delay in seconds.
Navigation
The menu is created using the RGL Overlay Navigation widget. It is inserted below the image on the EverWeb design canvas and is set to overlay the item above it. The logo at the top left is moved down to clear it.
Testing
Responsive pages must be properly tested before publishing. Opening it in a desktop browser and reducing the width or using the browser's responsive mode doesn't propely test a responsive layout.
The iOS Simulator is free and very easy to use and allows testing pages in all the current iPad and iPhone models.