changing color when in portrait mode and below certain viewport width?

Question

I am attempting to change the background-color of a div, but only when both the viewport is under a certain width and also is in portrait mode. So both width and orientation conditions must be met. Can you help please?

Below is my code so far. But it seems only to look if the viewport is in portrait mode and on that condition alone already changes color on the div. If the viewport is in portrait mode, but still above 299px, it should not change color yet. Because it needs to be below 299px and also in portrait mode to do so.

.colorchange-div {

  width: 100px;

  height: 100px;

  background-color: orange;

}



@media only screen and (max-width: 299px) and (orientation:portrait) {

  .colorchange-div {

    background-color: green;

  }

}

<div class="colorchange-div">



</div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Change max-device-width: to max-width:

like this:

@media only screen and (max-width: 299px) and (orientation:portrait) {
  .colorchange-div {
    background-color: green;
  }
}

Working resizable Fiddle

changing color when in portrait mode and below certain viewport width?

Sign up