ipad 网站问题 - 内容超出形状

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

尝试这样做以避免文本超出圆圈，如果可行请告诉我：

.statInfo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #7b133c;
    border-radius: 50%;
    text-align: center;
    overflow: hidden; 
    }

还有这个：

  @media only screen and (max-width: 959px) {

      .statNumberMedium, .statNumber {
            font-size: 24px;
            padding-top: 38px;

    }

 }

这肯定会解决问题，如果不能，请尝试此操作：

 @media only screen and (max-width: 959px) {

      .statNumberMedium, .statNumber {
            font-size: 24px !important;
            padding-top: 38px !important;

    }

 }

gif 来证明它对我有用：

ipad 网站问题 - 内容超出形状

ipad website issue -content outside shapes

html

css

ipad

mobile