0

This the code I came up with but cannot find where the problem lies. As the question implies, when rotated, the div becomes vertically scrollable and it is not desirable in my case.

Additionally, I would like that when the browser is not on full screen the content shrinks to adjust only to the text content at least vertically. I would imagine it would happen by default but does not even set the wrapper to height: inherit;

<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      transform: rotate(-90deg);
    }
    
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div>
      <p>hello how are you</p>
      <p>hello whatever here</p>
      <p>hello testing this</p>
    </div>
  </div>
</body>

</html>

Edit: @Brett Donald answer works with a small div like the one I initially posted but not with larger ones.

electronixG
  • 136
  • 1
  • 1
  • 18

1 Answers1

1

Not sure exactly what you’re after. I see that you’re trying to rotate the entire document (the HTML element). I am not at all surprised that doing so is causing problems.

If at all possible, try rotating specific elements rather than the entire document. For example, if you want the text to display in the centre of the viewport, then be rotated 90° counter-clockwise, you only need to rotate the wrapper div.

<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100svh;
      border: 2px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .wrapper {
      border: 2px solid black;
      transform: rotate(-90deg);
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div>
      <p>hello how are you</p>
      <p>hello whatever here</p>
      <p>hello testing this</p>
    </div>
  </div>
</body>

</html>
Brett Donald
  • 6,745
  • 4
  • 23
  • 51
  • what I am actually trying to do is rotate the mobile app inside the wrapper when the phone is placed in landscape mode so the user feels the need to come back to portrait mode. It actually woks but does not look too great as it is not centered, and the page is too big to be realistic. I am going to try to adapt your code to my needs. Thanks. – electronixG Jul 06 '23 at 10:48
  • @electronixG, so you want the user to stay in portrait orientation? Have you tried locking the orientation https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation – Arleigh Hix Jul 06 '23 at 17:07
  • @ArleighHix, yes but it does not seems to work as taken from that page. Do you have any working code I may be able to use. – electronixG Jul 06 '23 at 18:03
  • So you’re seeking to prevent the browser from rotating the page when the device is rotated? Review [this question](https://stackoverflow.com/q/5298467/2518285) and the answers given. – Brett Donald Jul 06 '23 at 22:17