Wielkość czcionki zwiększa się, gdy w divie będzie za dużo znaków

Question

Mam problem z CSS, gdy w DIVie będzie więcej niż 107 znaków to czcionka się zwiększa. PS: jeśli zmniejszę czcionkę, to limit się zwiększa :(

Kod CSS:

   BODY
   {
     font-family: CenturyGothic;
     margin: 0px;
     padding: 0px;
     text-wrap: word-wrap;
     text-align: center;
     background-image: url(../Zasoby/Background.png);
     background-size: 100%;
     font-size: 35px;
     color: white;
   }
   BODY a
   {
     text-decoration: none;
   }
   .profile-image
   {
     margin: 50px;
     float: left;
     background: transparent url(../Zasoby/ProfileDefault.png) center/cover no-repeat;
     height: 400px;
     width: 400px;
   }
   .profile-info
   {
     font-size: 60px;
     float: left;
     margin: 50px;
     margin-left: 0px;
     border-left: 40px solid #76FF02;
     background-color: rgba(255, 255, 255, 0.5);
     padding: 15px;
     height: 370px;
     width: calc(100% - 620px);
   }
   .profile-other-info
   {
     width: calc(100% - 130px);
     background-color: rgba(255, 255, 255, 0.5);
     border-top: 40px solid #0066CC;
     float: left;
     margin: 50px;
     margin-top: 0px;
     font-size: 50px;
     padding: 15px;
     word-break: break-word;
   }
   .viewprofile-container
   {
     text-align: left;
     float: left;
     width: 100%;
     background-color: rgba(204, 0, 80, 0.5);
   }
   
   
   .pe a:hover {color: #76FF02 !important;}
   
   
   
   
   @media all and (min-width:400px) and (max-width:1400px)
   {
     .cloud
     {
       font-size: 30px;
     }
     .register
     {
       width: 85%;
     }
     .profile-image
     {
       height: 200px;
       width: 200px;
     }
     .profile-info
     {
       font-size: 32px;
       height: 170px;
       width: calc(100% - 420px);
     }
     .profile-other-info
     {
       font-size: 32px;
     }
   }
   @media all and (min-width:400px) and (max-width:1700px)
   {
     .guzik
     {
       width: 35%;
       font-size: 42px;
     }
   }

Kod HTML:

<div class="viewprofile-container">
	    <div class="profile-image"></div><div class="profile-info">
	    Nick: <span style="color:#76FF02"><b>'.$login.'</b></span><br/>
	    Imię: <span style="color:#76FF02"><b>'.$name['0'].'</b></span><br/>
	    Nazwisko: <span style="color:#76FF02"><b>'.$name['1'].'</b></span><br/>
	    Ranga: <span style="color:#76FF02"><b>'.$ranga.'</b></span><br/></div>
	    <div class="profile-other-info">Opis: <span style="color:#0066CC"><b>'.$description.'</b></span></div>
	    </div>

 

Answer 1

Łapie Ci na media queries. Jeśli znaków jest za dużo, element się rozrasta - tym samym czcionka jest zmieniana (IMO zmniejszana, nie zwiększana)

Comments

Nie wiem co to IMO, ale dlaczego mam na @media klasy .profile-info i .profile-other-info - ustawione na tą samą wielkość czcionki to dlaczego w klasie .profile-other-info mi się ta czcionka zwiększa gdy @media się włączy? Zwiększa się tak na oko na 40px, a jeśli szerokość .profile-other-info będzie taka sama jak .profile-info to wszystko jest OK. A jak stopniowo zwiększam szerokość tego elementu to się nie poszerza tylko skaluje. Tak to wygląda: https://drive.google.com/file/d/0B3kNgFQ3VNkGSDU2WjdOLWhzdFk/view?usp=sharing

Znalazłem jeszcze jedną ciekawostkę, gdy ustawię wysokość tego elementu, to czcionka jest normalna. I to nie tylko jest z media queries, jak normalnie tak ustawię to jest to samo.