Notification bar with countdown timer - html

Question

I am trying to build a responsive notification bar with bootstrap, however my media query are not behaving properly,
I have some text with tag which I want to decrease size on smaller screen but only my timer text is changing size. also I want to add some margin between my text and button on smaller screen, but its not working.
Please look at my code and suggest some changes :|
$(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> Apply Now
</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>
Thank you
Mobile View
The previous issue has been fixed now, but on mobile view there is some white space on the right side, how do I fix that
Mobile View new

Answer 1

Move whole statement #media only screen and (max-width: 700px) {... ...} down of your rules. Then it should work right.
$(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);
#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;
}
}
<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> Apply Now
</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>