Website not re sizing for the mobile

I have received a message from Google's Webmaster tools that every page on my website has errors as it is not resizing for the mobile or smaller screens.
I have added the following code into the CSS but is does not change anything
@media only screen and (max-width: 480px){
.header_wrapper .header .post_btn{
margin-left:0;
}
}
The website is www.playtennisinthesun.com
Can you help please. Many thanks

 

Hello uwatecdiving!

Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 480px){
.logo {
  width: 35%;
}
.header .menu-bar {
  width: 35%;
}
#slides .slide-img {
  width: 300px !important;
  height: 100px !important;
}
.slider-container {
  width: 35%;
}
.content-wrapper {
  width: 35%;
}
.footer-container {
  width: 100%;
}
.navigation {
  width:35%;
}
}

Thanks,
Praveen

 

Thank you, it works perfectly now and when Google make their next update there should not be any errors.