Why does my media query have no effect on my CSS? - php

Question

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. I have included the HTML/PHP code for the counter as well as the 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">
Code:
.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);
}
<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>

Answer 1

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);
}
}