1

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 */
Rich
  • 121
  • 1
  • 2
  • 7
  • 1
    Possible duplicate of [Nesting Media Queries](http://stackoverflow.com/questions/16114000/nesting-media-queries) – Sreekanth Nov 26 '16 at 21:41

1 Answers1

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

Geeky
  • 7,420
  • 2
  • 24
  • 50
  • Thank you for your reply. I am not exactly sure what you mean by "you have to separate out both orientations you cannot mix them" I have tried to take out either landscape or portrait orientation I still get the same error. – Rich Nov 26 '16 at 23:33
  • oh what error are you getting...i was taking about writing media queries separately for the orientation and potrait – Geeky Nov 27 '16 at 05:50
  • otherwise your css code that you have written here does not seem to have any issues – Geeky Nov 27 '16 at 06:02