Почему мой медиа-запрос CSS игнорируется?

Question

Я пытаюсь заставить этот кусок CSS работать на моем ipad, но, похоже, он игнорирует медиа-запрос и использует вместо этого CSS-оболочку по умолчанию. Есть ли способ, которым я могу остановить это?

@media only screen and (max-width: 1024px) and (max-height: 768px) {
    #wrapper {
        position:absolute; 
        z-index:1;
        top:41px;
        width:150px;
        height:300px;
    }    
}

#wrapper {
    position:absolute; 
    z-index:1;
    top:41px; 
    bottom:0px; 
    left:0;
    width:100%;
    height:800px;
    overflow:auto;
}

Answer 1

Разве ваши медиазапросы не игнорируются более поздними значениями? Пытались ли вы переместить общие стили до в MQ (я полагаю, вы также можете использовать! Важный, но обычно это плохая идея) или добавить другой очевидный стиль, например background: red; в MQ?

Answer 2

Как правило, вы всегда должны записывать медиазапросы в последнюю очередь в таблице стилей, чтобы были определены основные стили, а затем приходят медиазапросы и перезаписывают их в конце.