ipad website issue -content outside shapes - html

Question

1When I check on my website using my Ipad 2, the text and number in those bubbles bellow reaches outside the circle shape! it runs ok in my macbook. but now looking at the snippet i just found out it is out of place!!! any hints to fix it for any kind of screen and device? --> http://www.nausea.ws
.statsWrap {
width: 130px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
.stats {
display: inline-block;
position: relative;
width: 100%;
transition: all 0.3s ease-in-out 0s;
}
.statDummy {
margin-top: 100%;
}
.statInfo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #7b133c;
border-radius: 50%;
text-align: center;
}
.statNumber {
font-size: 30px;
transition: all 0.5s ease-in-out 0s;
padding-top: 45px;
margin-bottom: 0;
}
.statNumberMedium {
font-size: 30px;
transition: all 0.5s ease-in-out 0s;
padding-top: 45px;
margin-bottom: 0;
}
.statNumberSmall {
font-size: 30px;
transition: all 0.5s ease-in-out 0s;
padding-top: 45px;
margin-bottom: 0;
}
.statNumberTCC {
font-size: 30px;
transition: all 0.5s ease-in-out 0s;
padding-top: 45px;
margin-bottom: 0;
}
.statText1 {
transition: all 0.5s ease-in-out 0s;
opacity: 0;
transform: scale(0);
padding: 0;
width: 160px;
margin-top: -25px;
margin-left: -14px;
}
.statText2 {
transition: all 0.5s ease-in-out 0s;
opacity: 0;
transform: scale(0);
padding: 0;
margin-top: -45px;
width: 160px;
text-align: center;
margin-left: -14px;
line-height: 24px;
}
.statText3 {
transition: all 0.5s ease-in-out 0s;
opacity: 0;
transform: scale(0);
padding: 0;
width: 160px;
margin-top: -35px;
margin-left: -14px;
}
.statText4 {
transition: all 0.5s ease-in-out 0s;
opacity: 0;
transform: scale(0);
padding: 0;
width: 160px;
line-height: 24px;
margin-top: -52px;
margin-left: -14px;
}
.statText5 {
transition: all 0.5s ease-in-out 0s;
opacity: 0;
transform: scale(0);
padding: 0;
width: 160px;
line-height: 24px;
margin-top: -70px;
margin-left: -14px;
}
.stats:hover {
transform: scale(2);
z-index: 10;
}
.stats:hover .statNumber {
transform: scale(.6);
transform: translateY(-35px);
}
.stats:hover .statNumberTCC {
transform: scale(.6);
transform: translateY(-45px);
}
.stats:hover .statText1 {
transform: scale(.6);
opacity: 1;
}
.stats:hover .statText2 {
transform: scale(.6);
opacity: 1;
}
.stats:hover .statText3 {
transform: scale(.6);
opacity: 1;
}
.stats:hover .statText4 {
transform: scale(.6);
opacity: 1;
}
.stats:hover .statText5 {
transform: scale(.6);
opacity: 1;
}
<div class="sixteen columns">
<h3 class="sectionTitle">Reconhecimento Acadêmico</h3>
</div>
<div class="statsWrap">
<div class="stats">
<div class="statDummy"></div>
<div class="statInfo">
<p class="statNumber">2011.2</p>
<p class="statText1">Prêmio Criatividade</p>
</div>
</div>
</div>
<div class="statsWrap">
<div class="stats">
<div class="statDummy"></div>
<div class="statInfo">
<p class="statNumber">2012.1</p>
<p class="statText1">2ºlugar categoria campanha</p>
</div>
</div>
</div>
<div class="statsWrap">
<div class="stats">
<div class="statDummy"></div>
<div class="statInfo">
<p class="statNumber">2012.2</p>
<p class="statText2">1ºlugar categoria campanha<br>Prêmio Criatividade<br>1ºlugar categoria geral</p>
</div>
</div>
</div>
<div class="statsWrap">
<div class="stats">
<div class="statDummy"></div>
<div class="statInfo">
<p class="statNumber statNumberMedium">2013.1</p>
<p class="statText1">Prêmio Criatividade</p>
</div>
</div>
</div>
<div class="statsWrap">
<div class="stats">
<div class="statDummy"></div>
<div class="statInfo">
<p class="statNumber">2013.2</p>
<p class="statText3">1ºlugar categoria audiovisual<br>1ºlugar voto popular</p>
</div>
</div>
</div>
<div class="statsWrap">
<div class="stats">
<div class="statDummy"></div>
<div class="statInfo">
<p class="statNumber statNumberSmall">2014.1</p>
<p class="statText4">1ºlugar categoria audiovisual<br>2ºlugar categoria campanha<br>1ºlugar categoria voto popular<br>Gran Prix</p>
</div>
</div>
</div>
<div class="statsWrap">
<div class="stats">
<div class="statDummy"></div>
<div class="statInfo">
<p class="statNumber statNumberTCC">TCC</p>
<p class="statText5">Nota máxima pela monografia<br>“Faça-me um HIT: uma análise da integração entre marketing e indústria musical no século XXI”</p>
</div>
</div>
</div>

Answer 1

try this to avoid that the text go out the circle and tell me if this works please :
.statInfo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #7b133c;
border-radius: 50%;
text-align: center;
overflow: hidden;
}
and this too :
#media only screen and (max-width: 959px) {
.statNumberMedium, .statNumber {
font-size: 24px;
padding-top: 38px;
}
}
this is will certainly fix the problem , if it doesn't then try this :
#media only screen and (max-width: 959px) {
.statNumberMedium, .statNumber {
font-size: 24px !important;
padding-top: 38px !important;
}
}
gif to prove that it works for me :