CSS3 Media Query not working

Question

I am having a bit of trouble with a media query not working at all. I have the viewport meta tag inserted into the head of my HTML file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I also have my media query following right under the standard CSS declaration:

>  #serviceIcons {
> 
>     position: relative; 
>     top: 25px;
>     width: 250px;
>     }
>
>     @media only screen and (max-width: 768px;) {
>     
>     #serviceIcons {
>     
>         position: relative;
>         top: 25px;
>         width: 250px;
>         -webkit-border-radius: 50%;
>         border-radius: 50%;
>         -webkit-box-shadow: rgba(0,0,0,0.9) 0px 0 10px;
>         box-shadow: rgba(0,0,0,0.9) 0 0 10px;
>     }
>     
>     }

I've tried just about everything I could find by searching Google, and no suggestions I have come across have worked. I'd like to add that I am using Bootstrap as well. Am I missing something?

Answer 1

Remove the semi colon

 @media only screen and (max-width: 768px)