Как правильно указывать медиа-запросы формата «Min-width — max-width»?

Question

[Надежда Головина]

Подскажите, как правильно задавать формат медиа-запроса с минимальной и максимальной width?
Есть блок акций action. В десктопе ширина блоков 41%. Но когда начинаю указывать ширину для

@media (min-width : 320px) and (max-width : 380px) {}

- стиль применяется не только для этого формата, но вообще для всех версий.

Comments

[PetrPo]

Нихрена себе, у дизайнера походу окуляры на пол лица, текст на кнопке 11 шрифтом, меню в футере нихрена не прочтешь. Дизайн + верстка просто от бога.
Посерьезному хозяин сайта лоханулся, лучше бы себе на маркетплейсе за 20-30к купил шаблон, ну или бесплатный eshop от битрикса установил, и то было бы круче

Answer 1

[Ankhena]

У вас

.blog-action .blog_inner .item {
    width: 41%;
}

а в медиа
.blog .item

Специфичность в первом случае выше и они перебивают всё остальное.

Почитайте про нейминг БЭМ.
Избегайте вложенности селекторов (больше 2 требуется очень редко, а БЭМ и вовсе без вложенности).

Comments

[Ankhena]

p.s. если переверстываете сайт, избавьтесь от флоатов.

[Надежда Головина]

Ankhena, в моем случае получается доверстывание. Поэтому не хочется городить кучу стилей, а сделать изначально правильно.

[Ankhena]

Надежда Головина, На данный момент правильно (разумно) это сочетание гридов и флексов.
Про вложенность и БЭМ я уже сказала.

И 41% это очень странная ширина.
Сочетание ширины в % и отступов в px без использования calc это вообще отдельная история.

[PetrPo]

Ankhena, что за история про Сочетание ширины в % и отступов в px без использования calc. Какая-то детская травма?
box-sizing: border-box и все будет прекрасно, если конечно ширина не 41%))

[Ankhena]

PetrPo, при чем тут детские травмы и box-sizing?
На сайте-пациенте ширина задана в процентах, отступы между ними в px.

[PetrPo]

Ankhena, ну и, в чем проблема-то? когда еще про твои бэмы люди и не слыхивали, flex-ы и кроссбраузерная верстка были вещами не совместимыми, смертные верстали на бутстрапе. Для адаптивной верстки так и делали - ширина в % отступы в px, только не внешние а внутренние делали, вот здесь и вступает спасительный box-sizing
Раз уж автор решил добавить в вопрос тег "1С-Битрикс", то собственно вот стандартный шаблон магазина от битрикса, верстка с бутстрапом в студию

[Ankhena]

PetrPo, я рада за вас.
Если Надежда переделает на такой вариант, то проблем не будет.
Те свойства и значения, которые указаны сейчас некорректны.

[PetrPo]

Ankhena, рад, что консенсус найден) Надежда не переделает, раз она в такой вопрос добавила тег "1С-Битрикс"....

Answer 2

[Lord_Dantes]

@media screen and (min-width:320px) and (max-width:380px){ // code}

Оффтоп

Но если у вас ширина 41% и это ничем не обусловлено, то видимо вы немножко не так сверстали элемент. Обычно секция занимает 100% и сама подстраивается под экран.

Comments

[Надежда Головина]

Согласна, что где-то могла неправильно прописать что-то и получился конфликт стилей.