KamCho KamCho - 2 months ago 17
CSS Question

CSS How to make text to scale like an image

I cannot figure out how to make text behave like image when resized. When I'm resizing browser text stays as large as on the beginning and starts to break in many rows. I tried to experiment with VW font-size but in that case, the text was too large on big screen and too small on small screen.

There are my css classes:

.text_head_container{
font-size: 35px;
font-size: 2.1875rem;
color: white;
width:60%;
display:inline-block;

}
.img_head_container{
display:inline-block;
width:15%;
height:auto;
}


I'll be thankful for any help with this.

Regards.

Answer

I suspect that media queries is the only reasonable option here:

p {
  font-size: 5vw;
}

@media screen and (max-width: 600px) {
  p {
    font-size: 30px;
  }
}
Comments