[英]Why does my media query have no effect on my CSS?
I'm making a counter that is contained within a box.我正在制作一个包含在盒子中的计数器。 I'm trying to make this counter responsive to different screen sizes, but the media query I'm trying to use will not work for some reason.
我正在尝试使此计数器响应不同的屏幕尺寸,但我尝试使用的媒体查询由于某种原因无法正常工作。
I have tried changing the the device width to below 768px but the query has no effect on the counter and I'm not sure why.我尝试将设备宽度更改为 768px 以下,但查询对计数器没有影响,我不知道为什么。 I have included the HTML/PHP code for the counter as well as the CSS.
我已经包含了计数器的 HTML/PHP 代码以及 CSS。 Can anybody figure out why it's not working
任何人都可以弄清楚为什么它不起作用
I have made sure this tag is included in the head of the document.我已确保此标签包含在文档的开头。
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML: HTML:
<div class="counter col_fourth counter-container" id="bottleCounter">
<i class="fas fa-times counter-closer" onclick="closeCounter()"></i>
<div class="counter-row">
<!--NB 19.11.21 green bottle image next to counter-->
<img class="bottle-icon rotate-bottle"
src="https://img.resultclothing.net/icons/Green_Bottle.png" alt="water bottle">
<h2 class="count-title count-number">
<?php
$bottleCount = str_split(intval($var));
echo '
<span class="timer counter-digit" data-to="'.$bottleCount[0].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[1].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[2].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[3].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[4].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[5].'" data-speed="5000"></span>
<span class="timer counter-digit" data-to="'.$bottleCount[6].'" data-speed="5000"></span>';
?>
</h2>
</div>
<p class="count-text"><?php echo constant('LANG_FOOTER_BOTTLES_REC'); ?></p>
</div>
CSS: CSS:
.wrapper {
width: 100%;
float:center
}
.counter-container {
top: 14vh;
right: 4%;
float: right;
width: auto;
height: auto;
background-color: rgb(0,0,0,0.7);
border-radius: 4%;
font-family: Trebuchet MS;
color: white;
}
.counter {margin-bottom:5px;}
.count-title {
font-size: 10px;
font-weight: bolder;
margin-top: 0;
margin-bottom: 0;
text-align: center;
line-height: 70px;
}
.count-text {
font-size: 16px;
font-weight: bold;
margin: 5px 20px 10px 20px;
text-align: center;
color: white;
}
.count-dial {
font-size: 14px;
font-weight: normal;
margin: 8px 5px;
text-align: center;
}
.counter-closer {
float: right;
margin: 2px 6px;
padding: 0;
font-size: 18px;
background-color: rgb(0,0,0,0.5);
}
.counter-closer:hover {
-webkit-filter: invert(1);
filter: invert(1);
}
.counter-digit {
background-image: linear-gradient(180deg, rgb(153, 255, 102), rgb(0, 255, 0));
border-radius: 5%;
color: rgb(0, 128, 0);
padding: 5px;
font-size: 30px;
}
.counter-row {
display:flex;
justify-content:center;
width: 100%;
margin-top: 2px;
}
.bottle-icon {
width: 38px;
height: 50px;
margin: 0 10px 10px 0;
}
.rotate-bottle {
transform: rotate(25deg);
-webkit-animation:shake .5s ease-in-out
.1s infinite alternate;
}
@-webkit-keyframes shake {
from{
-webkit-transform: rotate(35deg);
}
to {
-webkit-transform:rotate(15deg);
-webkit-transform:rotate(25deg);
}
the missing closing bracket缺少的右括号
Add the closing bracket to you keyframe将右括号添加到关键帧
@-webkit-keyframes shake {
from{
-webkit-transform: rotate(35deg);
}
to {
-webkit-transform:rotate(15deg);
-webkit-transform:rotate(25deg);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.