html - 如何使我网站中的这个计数器部分响应？

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 屏幕尺寸的预期结果非常好。

但是，对于手机屏幕尺寸显示不正确，我不知道为什么。 你能告诉我如何解决这个设计问题吗？

更新:

我尝试了@Georgie 给我的建议，得到了以下结果:

Answer 1

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

 <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;
         }
     }