Viewing website in browser on mobile device then a message pops-up


(Jeroen) #1

Hello,

I’m creating a website with hype. On mobile devices like a smartphone and a tablet the website is best viewed in landscape view. My question is now, when a person is viewing the website in a browser on a smartphone or a tablet in portrait mode is it possible that a message pops up with a little text or an image with the notification that it is better to turn the device in landscape mode for best view and experience.

Thanks for the assistance


(Freelancer) #2

you can do it with CSS

in this example the message is hidden through CSS with the style “display"none”.

this class will be visibile only in portrait view via MediaQuery ( the code below, in the symbol )

<style>
.portrait{ display: none !important; }

@media only screen 
and (orientation : portrait)  {
.portrait{ display: block !important; }
}
</style>

BTW: you must publish the example or use Hype Reflect.

portrait_alert.hype.zip (110.6 KB)


Force landscape view on smaller screens
(Jeroen) #3

I didn’t know that it is that easy.

Thanks!