I recommend starting with different responsive layouts and not adjusting any ‘flexible’ properties until later. Once you define what specific device sizes you want to support, and you get a sense of how text and images look on those devices, you may want to turn on flexible properties (scaling / pinning) to optimize different screen widths.
In Hype Pro, when you have access to Flexible Layouts and Responsive Layouts, use this workflow:
- Setup different layouts based on device sizes you want to support
- Test on those devices with dummy content
- If you are bothered by gaps on either side of a layout when viewing breakpoints inbetween specifically-defined breakpoints (layouts), you can use Flexible Layouts to either scale or pin elements so that there are no gaps between (for example) the iPad Portrait and iPad Landscape sizes.
For your example, I removed much of the flexible properties that adjust the ‘height’ of elements, since this is unnecessarily moving elements around. You typically don’t need to adjust the height of elements based on the height of the viewport – but you do want to adjust images based on the width of the viewport. (I use Window and Viewport interchangeably, but they are essentially the visible size of the browser). Please have a look at the transition between iPad Portrait and iPad Landscape: responsiveTest.hype 3.zip (478.3 KB)
I’m not sure what you have in mind for the top and bottom bars, but you will probably want them to expand flexibly (using Flexible Layouts) based on the width of the viewport. You will not want them to increase in size based on the height of the viewport, so I recommend unchecking the 
arrows for elements.