Почему не работают медиа запросы либо css?

Question

[it-spec97]

Проблема в том, что начал делать медиа запросы на ширину 1600px, после этого как я все настроил под 1600px, то основные настройки css перестали работать на мой экран все блоки по сайту разбросались.

PS Прошу, конечно, извинить меня за столь такой большой код, медиа запросы в середине,
а вот подключения

<link href="respond/test/test2.css" media="screen and (max-width:1600px)" rel="stylesheet"/>

spoiler

.game5{
top: 695px;
left: 568px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game10:hover{
top: 835px;
left: 168px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game11{
top: 835px;
left: 268px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game11:hover{
top: 835px;
left: 268px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game12{
top: 835px;
left: 368px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game12:hover{
top: 835px;
left: 368px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game13{
top: 835px;
left: 468px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game13:hover{
top: 835px;
left: 468px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game14{
top: 835px;
left: 568px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game14:hover{
top: 835px;
left: 568px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game15{
top: 835px;
left: 668px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game15:hover{
top: 835px;
left: 668px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game16{
top: 835px;
left: 768px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game16:hover{
top: 835px;
left: 768px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game17{
top: 835px;
left: 868px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game17:hover{
top: 835px;
left: 868px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game18{
top: 835px;
left: 968px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game18:hover{
top: 835px;
left: 968px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game19{
top: 980px;
left: 168px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game19:hover{
top: 980px;
left: 168px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game20{
top: 980px;
left: 268px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game20:hover{
top: 980px;
left: 268px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game21{
top: 980px;
left: 368px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game21:hover{
top: 980px;
left: 368px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game22:hover{
top: 980px;
left: 468px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game22:hover{
top: 980px;
left: 468px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game22{
top: 980px;
left: 468px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game22:hover{
top: 980px;
left: 468px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game23{
top: 980px;
left: 568px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game23:hover{
top: 980px;
left: 568px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game24{
top: 980px;
left: 668px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game24:hover{
top: 980px;
left: 668px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game25{
top: 980px;
left: 768px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game25:hover{
top: 980px;
left: 768px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game26{
top: 980px;
left: 868px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game26:hover{
top: 980px;
left: 868px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game27{
top: 980px;
left: 968px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game27:hover{
top: 980px;
left: 968px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
@media screen and (max-width:1600px){
.game10:hover{
top: 835px;
left: 335px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game11{
top: 835px;
left: 435px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game11:hover{
top: 835px;
left: 435px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game12{
top: 835px;
left: 535px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game12:hover{
top: 835px;
left: 535px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game13{
top: 835px;
left: 635px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game13:hover{
top: 835px;
left: 635px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game14{
top: 835px;
left: 735px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game14:hover{
top: 835px;
left: 735px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game15{
top: 835px;
left: 835px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game15:hover{
top: 835px;
left: 835px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game16{
top: 835px;
left: 935px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game16:hover{
top: 835px;
left: 935px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game17{
top: 835px;
left: 1035px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game17:hover{
top: 835px;
left: 1035px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game18{
top: 835px;
left: 1135px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game18:hover{
top: 835px;
left: 1135px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game19{
top: 980px;
left: 535px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game19:hover{
top: 980px;
left: 535px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game20{
top: 980px;
left: 335px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game20:hover{
top: 980px;
left: 335px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game21{
top: 980px;
left: 435px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game21:hover{
top: 980px;
left: 435px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game22{
top: 980px;
left: 535px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game22:hover{
top: 980px;
left: 535px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game22{
top: 980px;
left: 635px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game22:hover{
top: 980px;
left: 635px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game23{
top: 980px;
left: 735px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game23:hover{
top: 980px;
left: 735px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game24{
top: 980px;
left: 835px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game24:hover{
top: 980px;
left: 835px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game25{
top: 980px;
left: 935px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game25:hover{
top: 980px;
left: 935px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game26{
top: 980px;
left: 1035px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game26:hover{
top: 980px;
left: 1035px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.game27{
top: 980px;
left: 1135px;
position:absolute;
opacity: 1.0;
filter: alpha(opacity=1);
}
.game27:hover{
top: 980px;
left: 1135px;
position:absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
}

Answer 1

[Иван Беленков]

Вопрос, а зачем вы дублируете медиа-запрос в теге link?
Исходя из вашего кода у меня 2 варианта:
1) Ваш монитор имеет разрешение более 1600 пикселей по ширине (ваш тег link не будет подгружать css для таких мониторов);
2) Неправильное значение атрибута href в теге линк (css лежит по другому адресу и не подгружается вовсе).
Я склоняюсь к первому варианту.

Comments

[it-spec97]

монитор размером 1263 у меня, да и css подгружает

[Иван]

@it-spec97 ровно 1263? Вы болгаркой обрезали или чем-то другим?