如何让我的网站中的这个柜台部分响应？

Question

我是一位新的网页设计师，现在我正在设计一个响应式的柜台部分，它显示了快乐客户的数量，代码行等等。

这里是我的HTML代码：

<section id="call-to-action-2" class="section-padding"> 
     <div data-velocity="-.3" class="overlay-bg cta-bg"></div> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-3 col-md-3"> 
        <div class="counter-item"> 
         <i class="fa fa-cloud-upload"></i> 
         <div class="timer" id="item1" data-to="991" data-speed="5000"></div> 
         <h5>Training Courses</h5> 
        </div> 
       </div> 
       <div class="col-xs-12 col-sm-3 col-md-3"> 
        <div class="counter-item"> 
         <i class="fa fa-check"></i> 
         <div class="timer" id="item2" data-to="7394" data-speed="5000"></div> 
         <h5>Affiliates</h5> 
        </div> 
       </div> 
       <div class="col-xs-12 col-sm-3 col-md-3"> 
        <div class="counter-item"> 
         <i class="fa fa-code"></i> 
         <div class="timer" id="item3" data-to="18745" data-speed="5000"></div> 
         <h5>Accreditations</h5> 
        </div> 
       </div> 
       <div class="col-xs-12 col-sm-3 col-md-3"> 
        <div class="counter-item"> 
         <i class="fa fa-male"></i> 
         <div class="timer" id="item4" data-to="8423" data-speed="5000"></div> 
         <h5>Happy clients</h5> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 

CSS代码：

.counter-item { 
    position: relative; 
    text-align: center; 
} 

    .counter-item h5 { 
     text-align: center; 
     margin-bottom: 0px; 
     text-transform: uppercase; 
    } 

    .counter-item i { 
     font-size: 40px; 
    } 


.timer { 
    font-size: 48px; 
    font-weight: 800; 
    text-transform: uppercase; 
    text-align: center; 
    line-height: 80px; 
} 

下面是包括所有以前的代码与外部资源来的jsfiddle链接：https://jsfiddle.net/bjwroqym/ 我只是想在下面的快照中的每个计时器之间留出空间：

这段代码的桌面或iPad屏幕尺寸的预期结果是非常好，很好。

然而，对于手机屏幕的大小也无法正常显示，我不知道为什么。 你能告诉我如何解决这个设计问题吗？

UPDATE：

我试了一下@Georgie建议我，我得到了以下结果：

Answer 1

我不知道你是否已经创建任何mdedia查询为了这。无论如何，看看这个人是否适合你。 我已经添加了一个非常基本的媒体查询，并调用.timer并给它额外的底边。

<section id="call-to-action-2" class="section-padding"> 
    <div data-velocity="-.3" class="overlay-bg cta-bg"></div> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-3 col-md-3"> 
       <div class="counter-item"> 
        <i class="fa fa-cloud-upload"></i> 
        <div class="timer" id="item1" data-to="991" data-speed="5000"></div> 
        <h5>Training Courses</h5> 
       </div> 
      </div> 
      <div class="col-xs-12 col-sm-3 col-md-3"> 
       <div class="counter-item"> 
        <i class="fa fa-check"></i> 
        <div class="timer" id="item2" data-to="7394" data-speed="5000"></div> 
        <h5>Affiliates</h5> 
       </div> 
      </div> 
      <div class="col-xs-12 col-sm-3 col-md-3"> 
       <div class="counter-item"> 
        <i class="fa fa-code"></i> 
        <div class="timer" id="item3" data-to="18745" data-speed="5000"></div> 
        <h5>Accreditations</h5> 
       </div> 
      </div> 
      <div class="col-xs-12 col-sm-3 col-md-3"> 
       <div class="counter-item"> 
        <i class="fa fa-male"></i> 
        <div class="timer" id="item4" data-to="8423" data-speed="5000"></div> 
        <h5>Happy clients</h5> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 





    .counter-item { 
     position: relative; 
     text-align: center; 
      } 
    .counter-item h5 { 
     text-align: center; 
     margin-bottom: 0px; 
     text-transform: uppercase; 
    } 

    .counter-item i { 
    font-size: 40px; 
    } 


    .timer { 
    font-size: 48px; 
    font-weight: 800; 
    text-transform: uppercase; 
    text-align: center; 
    line-height: 80px; 

    } 

/* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) { 
     .timer { 
     margin-bottom:40px; 
     } 
    }