解析错误@media only屏幕和（方向：横向）

Question

I have this media query css: somehow it just won't pass validation, but if I take out the orientation queries, it will validate successfully. I simply cannot find anything wrong with it. all curly brackets are balanced,what could be wrong?

/* media query---MOB */

@media screen and (min-width:200px) and (max-width: 640px) {
/* ....CSS classes.... */

@media only screen and (orientation: landscape) {    
    .loginImgDiv {
    margin-left: 70%; 
    width:100%; 
    height:auto; 
    }
  } /* End of @media only screen and (orientation: landscape)*/
  @media only screen and (orientation: portrait) {
    .loginImgDiv {
    margin-left: 45%; 
    width:100%; 
    height:auto; 
    }
  } /* End of  @media only screen and (orientation: portrait)*/
} /*End of media query---MOB */

Answer 1

I think you have to separate out both orientations you cannot mix them

check this link orientation reference

change it to the following

@media screen and (min-width:200px) and (max-width: 640px) and (orientation:landscape){
/* ....CSS classes.... */


    .loginImgDiv {
    margin-left: 70%; 
    width:100%; 
    height:auto; 
    }
}
@media screen and (min-width:200px) and (max-width: 640px) and (orientation:potrait){
  .loginImgDiv{
    margin-left: 45%; 
    width:100%; 
    height:auto; 
    }
  } /* End of  @media only screen and (orientation: portrait)*/
 /*End of media query---MOB */

Hope it helps