Force landscape view on smaller screens

Responsive Flexible Layouts
1

Hi, i want to setup this:

-small screens (phone) portrait view show a ‘turn-your-phone-into-landscape image’
-small screens (phone) landscape view: show a proportional resized version of the default view
-medium screens (tablet) portrait view: show a proportional resized version of the default view
-medium screens (tablet) landscape view: show the default view
-large screens (computer) show 100% of the default view filled up with an background

Check the attached image for a visual overview.

I tried several setting, but didn’t managed this. What settings to be used?

Thanks!

view.jpg1772×709 98.8 KB

2

I think this can serve you should adjust display measurements and test it on your devices.

This is a quick idea, you must adjust

Let me know if it helps youMulti.hype.zip (1.4 MB)

3

Hi Mischa!

Below is a similar post with a solution from @michelangelo. His solution does not cover your "medium screens" portrait resized view - but why not invite them to rotate it anyway?

4

Thanks! This will help as a start.

5

thanks @JimScott

@mischa Probably need to use a combination of many MQ properties using the ‘and’ operator to chain tests in Hype Reflect

@media screen and (orientation: portrait) and (max-width: 00000000px) {
}

source: http://www.w3.org/TR/css3-mediaqueries/#media1

1 Like