Multiple media queries aren't working

Question

I'm a little bit confused because I'm used to do some CSS using media queries... I never had this problem before. Only the first media query is working well... I have few media queries working on specifics sizes like this :

/* - IPAD LANDSCAPE - */

@media screen and (max-width: 1024px) and (orientation: landscape){
  header{
    background-size: 28vw 30vh, 34vw 38vh;
    background-position: right 24vw top 3.5vh, right 21vw top 1vh;
  }
  header object{
    left:16vw;
    width:18vw !important;
  }
  header p{
    font-size:14px;
    top:16vh;
    left:-2vw;
  }
}

/* - IPAD PORTRAIT - */

@media screen and (max-width: 768px) and (orientation: portrait){
  header{
    background-size: 28vw 30vh, 34vw 38vh;
    background-position: right 28vw top 3.5vh, right 17vw top 1vh;
  }
  header object{
    left:10vw;
    width:24vw !important;
  }
  header p{
    font-size:20px;
    top:10vh;
    left:-2vw;
  } 
}

/* - PHONE LANDSCAPE - */

@media screen and (max-width: 750px) and (orientation: landscape){
  /*...*/
}

/* - PHONE PORTRAIT - */

@media screen and (max-width: 450px) and (orientation: portrait){
  /*...*/
}

I tried with and without the orientation parameter... I can't even figure out why my code isn't working well... I watched few topics on this but it didn't help me...

Thanks for helping :-)

EDIT:

I'm using Bootstrap for the first time, does it change something on media queries ?

EDIT 2:

I saw something like @media screen and (max-width:screen-sm-max) when we use Bootstrap, should I use this instead of pxvalue ? I think it will still the same...

Answer 1

Try to put the smallest @media queries width block of code first.

/* - PHONE PORTRAIT - */
@media screen and (max-width: 450px) and (orientation: portrait){
  /*...*/
}

/* - PHONE LANDSCAPE - */
@media screen and (max-width: 750px) and (orientation: landscape){
  /*...*/
}

/* - IPAD PORTRAIT - */
@media screen and (max-width: 768px) and (orientation: portrait){
  header{
    background-size: 28vw 30vh, 34vw 38vh;
    background-position: right 28vw top 3.5vh, right 17vw top 1vh;
  }
  header object{
    left:10vw;
    width:24vw !important;
  }
  header p{
    font-size:20px;
    top:10vh;
    left:-2vw;
  } 
}

/* - IPAD LANDSCAPE - */
@media screen and (max-width: 1024px) and (orientation: landscape){
  header{
    background-size: 28vw 30vh, 34vw 38vh;
    background-position: right 24vw top 3.5vh, right 21vw top 1vh;
  }
  header object{
    left:16vw;
    width:18vw !important;
  }
  header p{
    font-size:14px;
    top:16vh;
    left:-2vw;
  }
}

It solved this type of problem for me. Boostrap doc is following this structure too. (here @screen-sm-min are variables that you can set thank to LESS/SASS, but you cant replace it by fixed number)

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Personally I use something like that if it could help you :

@media (max-width:767px) {}

@media (max-width:767px) and (orientation:landscape) {}

@media (min-width:768px) and (max-width:991px) {}