Eddy Eddy - 2 months ago 12
CSS Question

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

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>




Answer Source

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

enter image description here

enter image description here