disable mobile rotation / show notification when phone is landscape

[Toby]

Hi

Is there a way to stop mobile rotation / lock screen?

Cheers
Toby

[arminunruh]

no there isn't :/

[zochovsky]

It would be great if this feature could be added.

[arminunruh]

there is no way to do this!

you can probably show a warning using custom css & custom html that shows up when the phone is in landscape mode using a combination of media queries and html classes

like
https://stackoverflow.com/questions/66044959/how-do-i-show-something-only-if-the-device-is-portrait-with-html-css

and

body.is-touchdevice

body has a class of "is-touchdevice" when ure on a phone

[arminunruh]

ok heres an example:

custom html at bottom:

<div class="rotate-notification">
<div class="rotate-text _Default_no_spaces">Please rotate your phone</div>
</div>

custom css:

.rotate-notification{
display:none;
z-index: 999999;
background-color: black;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}

.rotate-text{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white!important;
}

@media (orientation: landscape) and (max-width: 1024px){
body.is-touchdevice .rotate-notification{
display: block;
}
}

haven't tested it :D

[arminunruh]

instead of doing this you could also do:

in
lay options → Phone Breakpoint

you can set this to a higher value, so the phone version would still show up on landscape mode, instead of the desktop version

maybe that looks good enough then

[arminunruh]

Or if you want an image:

<div class="rotate-notification">
<img src="https://media.istockphoto.com/id/1144546554/vector/rotating-phone-from-vertical-to-horizontal-position-phone-vector-icon.jpg?s=612x612&w=0&k=20&c=dnBtqmZ7_8Cjk2UubtE_o1gDkaIMvs1kStk45tzmEiY=">
</div>

css:

.rotate-notification{
display:none;
z-index: 999999;
background-color: black;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}

.rotate-notification img{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
}

@media (orientation: landscape) and (max-width: 1024px){
body.is-touchdevice .rotate-notification{
display: block;
}
}