Landscape only orientation

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

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.

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

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

Actually C