'making a rotated text responsive for screen size

I am making a website that has a text rotated -90. because it is at the edge of the screen, it disappears. I am putting padding of 5vw to keep inside the screen, but it still disappears when changing the screen size. I have the text inside a grid. How do I keep it inside the screen and make it responsive?

rotated aboutus

.aboutus {
  margin-top: 5vh;
  display: grid;
  grid-template-columns: 10vw 88vw;
}

h1.titleaboutus {
  text-align: center;
  -ms-transform: translateY(-50%);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  color: #4778a6;
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 5vw;
}
<div class="aboutus">
  <h1 class="titleaboutus">About us</h1>

</div>
htmlcssresponsive-designrotation


Solution 1:[1]

One problem with using transforms is that the dimensions - as far as the whole layout is concerned - do not change. So the height of that grid row has not expanded to accommodate the rotated element.

Instead of relying on rotation, you can use writing-mode to turn the text. This will give the h1 the correct height. To get the text facing the other way we then need to rotate the element 180degrees and move it back into the grid. (or you could alter the tranfrom origin).

.aboutus {
  margin-top: 5vh;
  display: grid;
  grid-template-columns: 10vw 88vw;
}

h1.titleaboutus {
  text-align: center;
  transform: rotate(180deg) translateY(100%);
  transform-origin: bottom center;
  color: #4778a6;
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-lr;
}
<div class="aboutus">
  <h1 class="titleaboutus">About us</h1>

</div>

Solution 2:[2]

You can make the font-size and/or padding more responsive by using clamp

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

You could also simply use a media query.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A Haworth
Solution 2 pso

Related Questions