Часть медиазапроса не работает?

Question

Часть медиазапроса не работает?

0

В настоящее время я работаю над попыткой сделать магазин отзывчивым, и у меня возникает следующая проблема.

Я использую медиа-запросы, чтобы создать стиль магазина, а определенный диапазон в медиа-запросе не будет AT ALL.

Он отлично работает в остальных медиа-запросах, однако в этом он не вносит никаких изменений.

Вот пример одного из моих рабочих запросов Media:

@media all and (max-width: 685px) and (min-width: 640px)
{
    #ShopMiddleHolderEShop {float:left; width:915px;}
    #rightSideHolder {padding-left:15px; width:37%; float:left; padding-bottom:8px;margin-right:50px;}
    .prodTable {float:left; width:105%}
    #prodListView {float:left; width:240px;}
    .prodTable td {width:130%; float:left;}
    .prodTmbHld {width:80%; margin:8px 0 0 0;/* display: list-item; *//* float: left; */}
    fieldset.prodTmb {/* float:left; */ margin:0 auto;padding:5px 0;width:99.5%; height:150px;}
    .prodTmbImg { width:145px; height:143px; float:right;}
    .prodTmbImg img { width:140px; height:140px; float:left}
    .prodDsc { padding-left:10px; float:left; width:145px; font-size:12px; line-height:14px}
}

И вот диапазон, который НЕ работает !

@media all and (max-width: 640px) and (min-width: 590px)
{
    #ShopMiddleHolderEShop {float:left; width:915px;}
    #rightSideHolder {padding-left:15px; width:37%; float:left; padding-bottom:8px;margin-right:50px;}
    .prodTable {float:left; width:105%}
    #prodListView {float:left; width:auto; margin-right:320px;}
    .prodTable td {width:130%; float:left;}
    .prodTmbHld {width:70%; margin:8px 0 0 0;/* display: list-item; *//* float: left; */}
    fieldset.prodTmb {/* float:left; */ margin:0 auto;padding:5px 0;width:99.5%; height:150px;}
    .prodTmbImg { width:145px; height:143px; float:right;}
    .prodTmbImg img { width:140px; height:140px; float:left}
    .prodDsc { padding-left:10px; float:left; width:145px; font-size:12px; line-height:14px}
    #viewNav { float:left; width: 170px; border-right:1px solid #8FBCD1}
    #viewNav span { float:left; padding-left:8px}
    #viewNav a {float:left; border-right:1px solid #8FBCD1; padding:0 8px}
    #ShopUnderHeaderHolder { float:left; width:10%; background:#a8a8a8}                         
}

Любая помощь будет принята с благодарностью! Спасибо!

T.J. Wallace 28 апр. 2014, в 12:39

Источник

1

Я предполагаю, что у вас есть конфликтующие или перекрывающиеся медиа-запросы. Порядок имеет значение! Также для этой ширины, почему ваша первая собственность 915px?
Paulie_D 28 апр. 2014, в 10:20
0

Отсутствует ; после padding:0 8px из #viewNav a
James 28 апр. 2014, в 10:26
0

@ Джеймс не имеет значения, это в конце
webeno 28 апр. 2014, в 10:27
0

Я не думаю, что пропущенные закрывающие теги имеют значение в классах css в конце, как сказал Webeno, но я закрою их все просто, чтобы убедиться!
T.J. Wallace 28 апр. 2014, в 10:30
0

@TJWallace совершенно ненужно, ничего не изменит
webeno 28 апр. 2014, в 10:34
0

Оказалось, что это было из-за нескольких запросов @webeno, о которых вы будете рады узнать! Случайно вставленный в дополнительный медиа-запрос, начинающийся с max-width 640px, он не закрывался, так что эффект был ниже 640!
T.J. Wallace 28 апр. 2014, в 10:50
0

ну, это было изначально предложено @Paulie_D, но я рад, что вы решили это ... вы можете добавить это как ответ на свой вопрос, это может кому-то помочь ...
webeno 28 апр. 2014, в 10:54
0

Извините, я думал, что это вы опубликовали это! Извиняюсь. Но спасибо за помощь независимо! И спасибо @Paulie_D за решение :)
T.J. Wallace 28 апр. 2014, в 11:18

Показать ещё 6 комментариев

Теги:

html

css

media-queries

1 ответ

Ещё вопросы

Я предполагаю, что у вас есть конфликтующие или перекрывающиеся медиа-запросы. Порядок имеет значение! Также для этой ширины, почему ваша первая собственность 915px?
Отсутствует ; после padding:0 8px из #viewNav a
@ Джеймс не имеет значения, это в конце
Я не думаю, что пропущенные закрывающие теги имеют значение в классах css в конце, как сказал Webeno, но я закрою их все просто, чтобы убедиться!
@TJWallace совершенно ненужно, ничего не изменит
Оказалось, что это было из-за нескольких запросов @webeno, о которых вы будете рады узнать! Случайно вставленный в дополнительный медиа-запрос, начинающийся с max-width 640px, он не закрывался, так что эффект был ниже 640!
ну, это было изначально предложено @Paulie_D, но я рад, что вы решили это ... вы можете добавить это как ответ на свой вопрос, это может кому-то помочь ...
Извините, я думал, что это вы опубликовали это! Извиняюсь. Но спасибо за помощь независимо! И спасибо @Paulie_D за решение :)

T.J. Wallace · Accepted Answer · 2014-04-28T08-40-00.000Z

Проблема заключалась в том, что я перекрывал CSS.

Я случайно скопировал и вставил тот же мультимедийный запрос выше того, над которым работал, но он не был закрыт.

Например:

@media all and (max-width:640px) and (min-width:590px)
{

/*Some code here*/

Я удалил этот код, и он отлично работает!