I am for the first time trying to make a Hype webpage with a standard landscape desktop version layout and a portrait "iPhone" layout. I started with the landscape version and based on that I created a new iPhone layout. On each layout everything looks fine but after I made the iPhone layout, both the previewed and exported versions will only show the iPhone version.Tha landscape version seems to be totally cancelled out. Anyone know what I might be doing wrong? Thanks 
Did you check the breakpoints for the layouts¿
providing a simple hypefile showcasing the issue is a good idea in most cases
1 Like
Note that in the Layout sidebar, under the layout's name, it will show what width breakpoints the layout will show for. This may help you debug what is happening.
The values for the Breakpoint Width for the selected layout can be changed in the Scene Inspector's Responsive Layout section.
Thank you Hans-Gerd and Jonathan, I got totally focused on the break point of the mobile version so that I missed the "logic" of the behavior of the desktop version with it's own breakpoint. Now it makes sense to me. Thanks again!
On the same subject (sort of), does any one of you know if it is possible to prevent a mobile version to "turn" on a mobile?
function HypeLayoutRequest(hypeDocument, element, event) {
// return here the layoutname that you'd like to show based on your own rules
}
if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback": HypeLayoutRequest});
the layoutrequest-event is the Hype-Solution to your approach.
place this in the head and return any layoutname (dependend on your custom-logic) you'd like and it'll be shown ...
1 Like
Thanks Hans-Gerd, I copied the script and put the name of the mobile layout in, but wasn't succesfull. I am not good with CSS and HTML Here is the file if you would have the time to take a look. Also, the script would need to be "global" to cover all instances of mobile layouts.. WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free
<script>
function HypeLayoutRequest(hypeDocument, element, event) {
return 'iPhone-Forside'
}
if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback": HypeLayoutRequest});
</script>
will always show the iPhonelayout, but what exactly is your aim? means under which circumstances do you wish to show the iPhonelayout instead of the desktoplayout.
or do i missunderstand your request¿
1 Like
The first part with the mobile layout and desktop layout is solved fine thank you. As of now the design is right when on mobile (vertical) and desktop (landscape). The second request was concerning when/if people should choose to turn their mobile to landscape position, and then having a css function in place that wouldn't allow the page to turn as well (Because the design elements of the layout simply doesn't change to fit the landscape position). Don't know if I explain it clearly enough but thanks for your patience.
ah
well that's somehow tricky and i simply would not do so. if a user changes the orientation of the device, i would suggest it is is will ... an app can be fixed to an oriantation, but a website not really as far as i know ...
anyway, perhaps this simple css will work¿
/* Force portrait orientation */
@media screen and (orientation: landscape) {
body {
transform: rotate(90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
left: 0;
}
}
another thing you could do is the detection in js and then react on it:
<script>
function HypeLayoutRequest(hypeDocument, element, event) {
if (window.orientation === 90 || window.orientation === -90) {
//example: show a scene that displays a message to the user ... please change orientation ...
hypeDocument.showSceneNamed('landscapeMessageScene', optionalTransition, optionalDuration)
}
}
if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback": HypeLayoutRequest});
</script>
1 Like
Okay, thanks a lot Hans-Gerd, I will take a look at it tomorrow. Have a nice sunday!