media queries for tablet and phone - html

Question

Hi am using 2 media queries and they don't appear to work when viewed on tablet or phone, the original css still appears to override. i would like 2 blocks one under the other for tablet and phone view rather than the inline side by side on desktop view
original
.site-logo {
float:left;
display:inline-block;
width: 60%;
vertical-align: top;
}
img.logo {
height:auto;
width:auto;
}
.header-search {
float:right;
display:inline-block;
width: 40%;
vertical-align: top;
margin-top:2%;
}
media
/* Tablet */
#media only screen and (min-width: 768px) {
.site-logo {
display:block;
width: 100%;
margin: 0 auto;
}
img.logo
{
height:auto;
width:auto;
margin: 0 auto;
}
.header-search
{
display:block;
width: 100%;
margin: 0 auto;
}
}
/* Mobile */
#media only screen and (min-device-width: 480px) {
.site-logo
{
display:block;
width: 100%;
margin: 0 auto;
}
img.logo
{
height:auto;
width:auto;
margin: 0 auto;
}
.header-search {
display:block;
width: 100%;
margin: 0 auto;
}
}
link to site: Photohunters
Thank you
Melanie
Update
Have tried again but no go!
.site-logo {
float:left;
display:inline-block;
width: 60%;
vertical-align: top;
}
img.logo {
height:auto;
width:auto;
}
.header-search {
float:right;
display:inline-block;
width: 40%;
vertical-align: top;
margin-top:2%;
}
/* Tablet */
#media only screen and (min-width: 720px) and (max-width: 800px) {
}
/* Mobile */
#media only screen and (min-width: 480px) and (max-width: 719px) {
#sidebar { display:none; }
#sidebar-profile { display:none; }
#site-content-left {
width: 95%;
margin:0 auto;
}
.site-logo {
display:block;
width: 100%;
margin: 0 auto;
}
img.logo
{
height:auto;
width:auto;
margin: 0 auto;
}
.header-search {
display:block;
width: 100%;
margin: 0 auto;
}
}
/* Mobile - 320px */
#media only screen and (min-width: 300px) and (max-width: 479px) {
#sidebar {display:none;}
#sidebar-profile {display:none;}
#site-content-left {
width: 95%;
margin:0 auto;
}
.site-logo
{
display:block;
width: 100%;
margin: 0 auto;
}
img.logo
{
height:auto; width:auto; margin: 0 auto;
}
.header-search
{
display:block;
width: 100%;
margin: 0 auto;
}
}
html as requested
`<meta name="viewport" content="width=device-width" />
<div id="wrap">
<div class="site-logo"> <img class="logo" src="<?php echo get_stylesheet_directory_uri(); ? >/images/logobestnewstreight300.png" alt="photohunters.org" /></div>
<div class="header-search">
<?php if (is_page('home')) { ?>
<div class="fb-share-button" data-layout="button"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href=" <?php echo get_permalink(); ?>" layout="button_count" show_faces="false" ></fb:like></div><?php } ?>
<div class="headersearchbox">
<?php $results_page = site_url().'/search-results/'; ?>
<form name="search" method="post" action="<?php echo $results_page; ?>">
`