Javascript Div离开屏幕

我正在尝试结合这两个脚本：

然而，我有一个问题。在笔记本电脑上，一切看起来都很好，但当我将窗口调整为平板电脑/手机大小时，屏幕上方的计数器会移动。我一整天都在玩不同的css seeting，但无法理解：

演示：

我觉得这和处理视频的DIV的位置有关

CSS:

HTML:

https://www.youtube.com/watch?v=iNJdPyoqt8U，包含内容：'body'，自动播放：true，静音：true，起始时间：0，不透明度：1}>

<div class="pattern"></div> 
    <div class="big-background-container">
        <div class="countdown countdown-container container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>WE'RE COMING SOON</h1>
                    <h3>We are working very hard on the new version of oru site. It will brings a lot of new features. Stay tuned!</h3>
                </div>
            </div>
            <div class="clock row">
                <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
                    <div class="wrap">
                        <div class="inner">
                            <div id="canvas-days" class="clock-canvas"></div>

                            <div class="text">
                                <p class="val">0</p>
                                <p class="type-days type-time">DAYS</p>
                            </div>
                            <!-- /.text -->
                        </div>
                        <!-- /.inner -->
                    </div>
                    <!-- /.wrap -->
                </div>
                <!-- /.clock-item -->

                <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
                    <div class="wrap">
                        <div class="inner">
                            <div id="canvas-hours" class="clock-canvas"></div>

                            <div class="text">
                                <p class="val">0</p>
                                <p class="type-hours type-time">HOURS</p>
                            </div>
                            <!-- /.text -->
                        </div>
                        <!-- /.inner -->
                    </div>
                    <!-- /.wrap -->
                </div>
                <!-- /.clock-item -->

                <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
                    <div class="wrap">
                        <div class="inner">
                            <div id="canvas-minutes" class="clock-canvas"></div>

                            <div class="text">
                                <p class="val">0</p>
                                <p class="type-minutes type-time">MINUTES</p>
                            </div>
                            <!-- /.text -->
                        </div>
                        <!-- /.inner -->
                    </div>
                    <!-- /.wrap -->
                </div>
                <!-- /.clock-item -->

                <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
                    <div class="wrap">
                        <div class="inner">
                            <div id="canvas-seconds" class="clock-canvas"></div>

                            <div class="text">
                                <p class="val">0</p>
                                <p class="type-seconds type-time">SECONDS</p>
                            </div>
                            <!-- /.text -->
                        </div>
                        <!-- /.inner -->
                    </div>
                    <!-- /.wrap -->
                </div>
                <!-- /.clock-item -->
            </div>
            <!-- /.clock -->
        </div>
        <!-- /.countdown-wrapper -->
    </div>                                                    

打印屏幕：

---

您需要添加一个媒体查询，以便在包含计数器的div元素上针对mobile进行调整

@media screen and (max-width: 40em){
 .countdown-container{
    margin-top: 900px;
 }
}

这修复了容器并允许从我的测试中查看它。您可能希望使用相同的媒体查询来调整页脚，因为它似乎也存在一些问题

此：。倒计时容器具有以下内容：

-webkit转换：translateY-50%； -moz变换：translateY-50%； 转化：translateY-50%

属性集

---

页面还有其他问题，但是对于特定的问题，您应该设置调整或删除它们。

有一些CSS转换被应用到负y值的元素上。这可能是一个肮脏的修复，但它可以工作。您使用的插件确实传递了转换和其他值。所以我相信还有其他方法可以做到，但这似乎是可行的。我只是在一个测试环境中测试，而不是在一个实际的设备上测试，但应该是相同的。这不就是调整圆圈大小的原因吗？

@media screen and (max-width: 40em){
 .countdown-container{
    margin-top: 900px;
 }
}