带倒数计时器的通知栏

Question

我正在尝试使用bootstrap构建响应式通知栏，但是我的媒体查询行为不正常，

我有一些带标签的文字，我希望在较小的屏幕上减小尺寸，但只有我的计时器文字正在改变尺寸。另外我想在较小的屏幕上添加文本和按钮之间的边距，但它不起作用。

请查看我的代码并提出一些更改建议：|

$(function() {
            var endDate = new Date();
            endDate = new Date(2016, 12 - 1, 31);
            $('#dcountdown').countdown({
      until: endDate
            });

            $('#dclose').click(function() {
                $(this).parent().slideUp();
            });
        });

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic);
        @media only screen and (max-width: 700px){.dcontent strong{font-size: 50%;}.countdown-section{font-size: 80%;padding-bottom: 10%;} .mybutton{padding: 2px;}}

        #dbanner {
            position: top;
            bottom: 0px;
            height: auto;
            width: 100%;
            padding: 10px 0 10px 0;
            color: #fff;
            text-align: center;
            font-family: "Open Sans";
            text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
        }
        
        .dcontent {
            padding: 0px 30px 0px 30px;
            font-size: 16px;
        }

        .dcontent strong {
            font-size: 20px;
            color: #fff;
            white-space: nowrap;
            margin-right: 30%;
            text-align: center;
        }

        #dclose {
            position: absolute;
            font-size: 8px;
            height: 20px;
            line-height: 10px;
            top: 5px;
            right: 10px;
            color: #fff;
        }

        #dclose:hover {
            cursor: pointer;
        }

        .change-color {
            background-color: #000000;
            color: #FFF;
            text-align: center;

        }
        .mybutton{
            padding: 5px;
            background: #006622;
            background-size: 100%;
            border-radius: 0px;
            color: #fff;
        }

        .countdown-section {
            padding: 0 5px 0 5px;
            text-align: center;
            
            
        }

        .countdown-amount {
            padding: 0 5px 0 0;
        }

        .countdown-period {
            text-transform: none;
        }

        .countdown-descr {
        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<div id="dbanner" class="change-color">
      <div class="dcontent">
          <strong>Some Text Here Some Text Here Some </strong>  <span id="dcountdown"></span> <a href="http://www.google.com" target="_blank" role="button" class="mybutton">Apply Now</a>
      </div>
      <div id="dclose">close me!</div>
    </div>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.countdown.min.js"></script>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.plugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

谢谢

Mobile View

以前的问题现已修复，但在移动设备视图中，右侧有一些空格，我该如何解决？

Mobile View new

Answer 1

移动整个声明@media only屏幕和（max-width：700px）{... ...}规则。然后它应该正常工作。

＆＃13;

＆＃13;

$(function() {
            var endDate = new Date();
            endDate = new Date(2016, 12 - 1, 31);
            $('#dcountdown').countdown({
      until: endDate
            });

            $('#dclose').click(function() {
                $(this).parent().slideUp();
            });
        });

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic);
       #dbanner {
            position: top;
            bottom: 0px;
            height: auto;
            width: 100%;
            padding: 10px 0 10px 0;
            color: #fff;
            text-align: center;
            font-family: "Open Sans";
            text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
        }
        
        .dcontent {
            padding: 0px 30px 0px 30px;
            font-size: 16px;
        }

        .dcontent strong {
            font-size: 20px;
            color: #fff;
            white-space: nowrap;
            margin-right: 30%;
            text-align: center;
        }

        #dclose {
            position: absolute;
            font-size: 8px;
            height: 20px;
            line-height: 10px;
            top: 5px;
            right: 10px;
            color: #fff;
        }

        #dclose:hover {
            cursor: pointer;
        }

        .change-color {
            background-color: #000000;
            color: #FFF;
            text-align: center;

        }
        .mybutton{
            padding: 5px;
            background: #006622;
            background-size: 100%;
            border-radius: 0px;
            color: #fff;
        }

        .countdown-section {
            padding: 0 5px 0 5px;
            text-align: center;
            
            
        }

        .countdown-amount {
            padding: 0 5px 0 0;
        }

        .countdown-period {
            text-transform: none;
        }

        .countdown-descr {
        }
@media only screen and (max-width: 700px){
	.dcontent strong {
		font-size: 50%;
	}
	.countdown-section {
		font-size: 80%;
		padding-bottom: 10%;
	}
	.mybutton {
		padding: 2px;
	}
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<div id="dbanner" class="change-color">
      <div class="dcontent">
          <strong>Some Text Here Some Text Here Some </strong>  <span id="dcountdown"></span> <a href="http://www.google.com" target="_blank" role="button" class="mybutton">Apply Now</a>
      </div>
      <div id="dclose">close me!</div>
    </div>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.countdown.min.js"></script>
<script src="https://lizatom.com/wp-content/themes/lizatom2015/banner/jquery.plugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;