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

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

1 个答案: