медиа-запрос для портретной ориентации не работает

Question

Мой медиа-запрос для портретной ориентации, похоже, не работает. Любые идеи, что я делаю неправильно, пожалуйста?

HTML:

<div class="titleCard" id="first" style="background-color:white"></div> 

CSS:

html, body { -webkit-backface-visibility:hidden;} 

#first { 
    background-color: #000; 
    width: 100%; max-width: 1920px; 
    height: 100%; max-height: 1080px; 
    background: url('images/bg.png') no-repeat center; 
    background-size:cover; 
    position:relative; 
} 

.bgwidth { width: 100%; max-width: 1920px; } 
.bgheight { height: 100%; max-height: 1080px; } 

@media all and (orientation:portrait) { 
    background: url('images/Mobile_Art.jpg') no-repeat center; 
} 

Answer 1

Он работает (simplified test). Просто вы не говорите, какой элемент он должен изменить background, когда меняется ориентация.

Вы, вероятно, имел в виду, чтобы иметь что-то вроде:

@media all and (orientation: portrait) { 
    #first { 
     background: url('images/Mobile_Art.jpg') no-repeat center; 
    } 
} 

вместо:

@media all and (orientation:portrait) { 
    background: url('images/Mobile_Art.jpg') no-repeat center; 
}