# Block landscape view rotation

**URL:** <https://community.glideapps.com/t/block-landscape-view-rotation/30493>\
**Category:** Ask for Help\
**Created:** [August 15, 2021, 9:39am UTC](https://community.glideapps.com/t/block-landscape-view-rotation/30493 "2021-08-15T09:39:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![nosehms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nosehms/32/30231_2.png) [@nosehms](https://community.glideapps.com/u/nosehms)\
**Post date:** [August 15, 2021, 9:39am UTC](https://community.glideapps.com/t/block-landscape-view-rotation/30493/1 "2021-08-15T09:39:10Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/f/0f15a08a1c53b2313091f89019083015232ca7c3.png)

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

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [August 15, 2021, 9:56am UTC](https://community.glideapps.com/t/block-landscape-view-rotation/30493/2 "2021-08-15T09:56:52Z")

</div>

> [@nosehms](#):
>
> But what i want (if it can be done) is to force always portrait mode and disable landscape rotation.

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

---

<div class="post-metadata">

**Author:** ![nosehms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nosehms/32/30231_2.png) [@nosehms](https://community.glideapps.com/u/nosehms)\
**Post date:** [August 15, 2021, 10:12am UTC](https://community.glideapps.com/t/block-landscape-view-rotation/30493/3 "2021-08-15T10:12:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nosehms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nosehms/32/30231_2.png) [@nosehms](https://community.glideapps.com/u/nosehms)\
**Post date:** [August 15, 2021, 10:41am UTC](https://community.glideapps.com/t/block-landscape-view-rotation/30493/4 "2021-08-15T10:41:07Z")

</div>

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;  
}  
}

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [August 16, 2021, 3:07am UTC](https://community.glideapps.com/t/block-landscape-view-rotation/30493/5 "2021-08-16T03:07:44Z")

</div>

Share a screenshot too 😁

---

<div class="post-metadata">

**Author:** ![nosehms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nosehms/32/30231_2.png) [@nosehms](https://community.glideapps.com/u/nosehms)\
**Post date:** [August 16, 2021, 8:57am UTC](https://community.glideapps.com/t/block-landscape-view-rotation/30493/6 "2021-08-16T08:57:35Z")

</div>

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… 😅, is the compression of the gif…

![RPReplay_Final1629102949](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/6/c6b2d8c6449ea2987174f18511b1357151a1149a.gif)

---

<div class="post-metadata">

**Author:** ![Yosef\_Buchman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yosef_buchman/32/44100_2.png) [@Yosef\_Buchman](https://community.glideapps.com/u/Yosef_Buchman)\
**Post date:** [June 23, 2022, 3:09am UTC](https://community.glideapps.com/t/block-landscape-view-rotation/30493/7 "2022-06-23T03:09:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 23, 2022, 3:11am UTC](https://community.glideapps.com/t/block-landscape-view-rotation/30493/8 "2022-06-23T03:11:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:49pm UTC](https://community.glideapps.com/t/block-landscape-view-rotation/30493/9 "2024-01-17T16:49:27Z")

</div>