Landscape only orientation

Authoring Twine
,
1

I tried to lock the orientation on mobile browser using the following code:

@media (orientation: portrait) {
  body {
    position: fixed;
    right: calc(100vmin - 100vmax + 10px);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }
  html,body{
  overflow-x:hidden;
  height: 100vh;
    }
}

but in Harlowe 3.х it doesn’t work correctly. Could you suggest me the right solution?

1 Like
2

Please use the optional tags of the New Topic form to indicate the name and version of the Story Format you are using, as answer can vary based on this information. I will assume you are using the 3.x series of Harlowe.

I will assume that you know:

  1. that the orientation media feature is based on the current dimensions of the view-port and not the device’s orientation, which means that opening the device’s soft keyboard can effect the value of the property.
  2. which web-browsers (brands and versions) support this feature.

What do you mean by “it doesn’t work correctly”?

I placed your CSS example within a new Harlowe 3.x project then viewed the resulting story HTML file within Chrome. If I reduced the width of the view-port so that its value was smaller that the view-port’s current height the contents of the current Passage was successfully rotated 90 dec anti-clockwise.

3

Harlowe 3.1.0
I see this thing https://sun9-53.userapi.com/c856128/v856128311/1ead83/H9B9Vi90SRY.jpg
instead of this https://sun9-31.userapi.com/c856128/v856128311/1ead8d/GlR53rORIlM.jpg .
Here is my entire css

  body {
    position: fixed;
    right: calc(100vmin - 100vmax);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }
  html,body{
  overflow-x:hidden;
  height: 100vh;
    }
}

tw-sidebar tw-icon.redo {
	display: none;
}
tw-sidebar tw-icon.undo {
	display: none;
}

tw-passage

{

background-color: rgba(0,0,0,0.45);

width: 100%;

color: #d9d9d9;

text-shadow: 2px 2px black;

padding: 30px;

border: none;

border-radius: none;

}
tw-story 
{
 background-image:url("xxxx");
background-size:cover;
font: 100% verdana, sans-serif;
padding: 5% 20%;
font-size: 1.5em;
background-attachment: fixed;
}
button 
{ 
background: none!important; 
border: none; padding: 0!important; /*optional*/ 
background-color: #000;
color: #fff;
font-size: 1.5em;
line-height: 3em;
margin: 0;
cursor: pointer; 
font: 100% Verdana, serif;
color: rgb(230, 128, 25);
font-weight: 600;
text-shadow: 2px 2px black;
}
tw-link
{
  color: rgb(230, 128, 25);
}
tw-link:hover
{
  color: #ffdd00;
  transition: 0.25s linear;
}
tw-link:active
{
  color: #ffdd00;
}
tw-link:visited
{
color: rgb(230, 128, 25);
}
4

Is your issue with the 2nd of your linked images the fact that:
a. the background image isn’t being displayed.
b. that block of text doesn’t appear closer to the left side of the view-port.
c. both of the above.
d. something else as well

5

Actually C

6

Hi @Sergus did you find a solution for this? I’m having similar/related issues. i.e. the background image not displaying any longer and (in my case) the text not getting transformed.

7

Sorry, but finally I still haven’t found a solution for that. Anyway, now I know css much better and maybe someday I will return to this issue

8

Ah that’s unfortunate, but thank you for replying. Please do let me know if you have any luck with the problem and I will do the same!