making a rotated text responsive for screen size-CodePudding

i am making a website which has a text rotated -90. because it is at the edge of the screen, it disappears. i am putting a 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 in 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 >
  <h1 >About us</h1>

</div>

CodePudding user response：

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 >
  <h1 >About us</h1>

</div>

CodePudding user response：

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