Wraping text inside a container

Question

I have a container which I write text inside; the code is as follows:

 #webdd {
    overflow: scroll;
    width: 100%;
    max-width: 100%;
    max-height: 50%;
    margin-top: 30%;
    word-wrap: break-word;
    text-align: center;
    display: block;
}

#headerw {
    font-size: 16px;
    opacity: 0.9;
    font-family: globerb;
    font-weight: bold;
    margin-bottom: 0px;
    color: #333;
    z-index: 9;
}

#descw {
    margin-left: 30px;
    margin-right: 30px;
    font-size: 13px;
    opacity: 0.6;
    font-family: globerb;
    font-weight: normal;
    margin-top: 0px;
    color: #333;
    text-shadow: none;
    text-align: justify;
    z-index: 9;
}

The problem is that the page is specifically for mobiles, and when someone has a small height the text goes into a scroll(which doesn't appear on mobiles), I want something that can make text smaller, or.. wrap it in some manner. #webdd is my main container, the others headerw is the header and descw is the description.

Any ideas?

Answer 1

Use media queries that will change the size of the text according to the height of the container.

  @media screen and (max-width: 995px) , screen and (max-height: 700px) {
      font-size:1.25em;
  }

And other such combinations of the screens sizes that you are targetting to support.