Block landscape view rotation

Ask for Help
1

Hi. I’m trying to block the landscape view but i’m not able to do it. I used this code but it’s not working fine for my app (see image):

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}

IMG_1682W
IMG_1682W1500×999 205 KB

What I can do is have the whole landscape background white with this code:

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
display: none;
}
}

But what i want (if it can be done) is to force always portrait mode and disable landscape rotation.

Thanks

2

Looking at your screenshots, isn’t that exactly what’s happening?

3

Yes but with that black block from middle to the bottom of the screen, i don’t know how to manage that :thinking:

4

Ok i solved it adding (height: "number"vh;)

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
height: 300vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}

5

Share a screenshot too :grin:

6

Here’s a gif! The only thing I do not like is the transition between portrait and landscape, I wish it didn’ t exist. I would like when you turn the mobile it was static, without that little glitch, but I do not think it is possible.

Sorry for the colors of the gif, aren’t the original colors, that background blue… :sweat_smile:, is the compression of the gif…

RPReplay_Final1629102949

2 Likes
7

When i Insert the css code beginning @media into a rich text component, the text simply appears as normal, no change to screen layout / landscape mode.

Am I missing something?

8

Did you enclose the CSS with tags?
I think most people will use <pre><span><style>

1 Like