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

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">

HTML:

<div  id="bottleCounter">
  <i  onclick="closeCounter()"></i>
    <div >
        <!--NB 19.11.21 green bottle image next to counter-->
        <img  
        src="https://img.resultclothing.net/icons/Green_Bottle.png" alt="water bottle">
        <h2 >
        <?php 
            $bottleCount = str_split(intval($var)); 
        echo '
        <span  data-to="'.$bottleCount[0].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[1].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[2].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[3].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[4].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[5].'" data-speed="5000"></span>
        <span  data-to="'.$bottleCount[6].'" data-speed="5000"></span>';
        ?>
        </h2>      
    </div>
    <p ><?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);    
}

CodePudding user response：

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