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