The following may not be perfect for You as I've written it - but it should at least be a good start towards helping You utilize percentage based values instead of fixed pixels.
Hype Help JHSv1.hype.zip (16.7 KB)
The "deviceWidthAdj" function reads the screen width of the device it is being opened on, and adjusts the left animated property of the specified element to travel the full width of the device. This works in the "Responsive Design" mode of Safari - and on my "iPad 4" & "Desktop".
var mainPageEl = hypeDocument.getElementById('mainPage');
var whatDeviceWidth = window.screen.width;
hypeDocument.setElementProperty(mainPageEl, 'left', whatDeviceWidth, 2, 'easeinout' );
There is no reason now to have a timeline for this effect - but I've left it in.
I have not created~adjusted the code for the "close box" (large "X") used to reset the sliding "Main Page" group. I believe this code to be straightforward - the above script should be a guide to do this part.