![](/img/trans.png)
[英]Why does my text has the justify effect when I didnt made it to have this effect (css/php)
[英]Why does my media query have no effect on my CSS?
我正在制作一個包含在盒子中的計數器。 我正在嘗試使此計數器響應不同的屏幕尺寸,但我嘗試使用的媒體查詢由於某種原因無法正常工作。
我嘗試將設備寬度更改為 768px 以下,但查詢對計數器沒有影響,我不知道為什么。 我已經包含了計數器的 HTML/PHP 代碼以及 CSS。 任何人都可以弄清楚為什么它不起作用
我已確保此標簽包含在文檔的開頭。
<meta name="viewport" content="width=device-width, initial-scale=1">
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:
.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);
}
缺少的右括號
將右括號添加到關鍵幀
@-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.