CODEWITHSUNDEEP
css
olo
olo

Reputation: 5271

css3 mobile media queries

I have different views on portrait and landscape

    /* portrait ----------- */
    @media only screen 
    and (max-width : 320px) {
      body{
         padding:20px;
        }
    }


  /* landscape----------- */
      @media only screen 
    and (min-width : 321px) {
     body
        {
        padding:60px;
        }
    }
  /* webpage----------- */
       body
            {
            padding:0px;
            }

however, landscape css effects on webpage view. how do I spilt webpage up? I tried to make another media query on webpage, but it didnt work. also I tried (min-device-width : 321px) for devices only, but it doesnt work

Upvotes: 1

Views: 368

Answers (1)

Jules
Jules

Reputation: 14510

As explained in this article, the media query spec includes orientation detection. It should look something like this:

@media screen and (orientation:landscape) and (min-width:321px) {
    foo {
        padding:60px;
    }
}

@media screen and (orientation:portrait) and (max-width:320px) {
    foo {
        padding:20px;
    }
}

And so on.

Upvotes: 1

Related Questions