Media queries not working below min-width 768px

Question

I have set some media queries, but some work and some dont. I really dont know what is wrong, because i used the same media query code for another project and that worked as usual. It works from 768px and on but not on smaller screens. I am using bootstrap and angular.

@media only screen and (min-width : 320px) and (max-width : 480px) {
   .accordion-ticket {
        margin-left: 10px;
    }
}
@media (min-width: 481px){
    .accordion-ticket {
        margin-left: 10px;
    }
}
@media (min-width: 768px) {
   .accordion-ticket {
        margin-left: 10px;
    }
}

Am I missing something? Meta tag is:

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

Answer 1

Offhand I'd say you were missing a max-width statement from the middle media query but it's not entirely clear what the issue is.

JSfiddle Demo

.accordion-ticket {
  height: 25px;
  background: red;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .accordion-ticket {
    background: blue;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .accordion-ticket {
    background: green;
  }
}
@media (min-width: 768px) {
  .accordion-ticket {
    background: orange;
  }
}

<div class="accordion-ticket"></div>

Answer 2

Looks like your queries are upside down for a start you should have them from the widest to shortest top to bottom.