media query responding in browser but not mobile - css

Question

I have this media query with some CSS inside, the query works fine on other sites I have used with similar CSS, and when I resize the browser I get the desired effects. But when I look on iPad or android I see no effect, it is if the media query does not exist
#media only screen and (max-width: 767px) {
.menu-button{
display: block;
height: 42px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat,repeat-x;
background-position: 98% 50%,0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
margin-right: 106px;
}
.menu-button {
display: block;
height: 34px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat, repeat-x;
background-position: 98% 50%, 0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
}
#main {
width: 100%;
}
#block-menu-primary-links ul.menu li {
float: none;
padding: 0px 0px;
width: 100%;
display: none;
float: left;
background-color: rgb(172, 173, 184);
}
#main li {
float: none;
list-style-type: none;
font-weight: 400;
}
#main li.first a {
border-left: 0px;
}
#main li a {
width: 100%;
}
#main li ul, #main li ul li, #main li ul li a {
position: relative;
float: none;
width: 100%;
}
}

Answer 1

You have to add the veiwport tag to your HTML (in the head):
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

I think that the problem is that you're placing this piece at the top:
#media only screen and (max-width: 767px) {
.menu-button{
display: block;
height: 42px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat,repeat-x;
background-position: 98% 50%,0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
margin-right: 106px;
}
And it's being overridden by
.menu-button {
display: block;
height: 34px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat, repeat-x;
background-position: 98% 50%, 0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
}
Try placing the media query and its content at the bottom.
Let me know if that worked.
Regards