Элемент медиа-запроса не исчезает

Question

У меня в магазине Prestashop есть абзац авторского права, который я хочу рассказать в одной строке для больших дисплеев и с разрывом строк для небольших (т. Е. Мобильных). Я создал два различных идентификаторов для двух версий авторского текста, как это:

@media (max-width: 719px) {#poweredby {display: none;}} 
 
     @media (min-width: 720px) {#poweredby {text-align: center;margin: -10px 0 -13px 0;display: block;}} 
 
     @media (max-width: 719px) {#poweredby-mob {display: block;}} 
 
     @media (min-width: 720px) {#poweredby-mob {display: none!important;}}

<div id="poweredby" class="col-md-12 col-xs-12"> 
 
    COPY 1 - Single line 
 
    </div> 
 
    <div id="poweredby-mob" class="col-md-12 col-xs-12"> 
 
    COPY 2 - Two lines 
 
    </div> 
 

 

 

В результате, хотя странно: на мобильных дисплеев только «PoweredBy-моб» ДИВ видна , как и следовало бы, но на более крупных, они ОБОИХ появляются, «poweredby-mob» не получает отображение: none атрибут, даже если я добавил! важно для него.

Любые идеи, почему этот простой медиа-запрос не работает?

Answer 1

Запросы СМИ могут быть разборчивыми в отношении того, как вы их структурируете. Попробуй это.

@media (max-width: 719px) { 
    #poweredby {display: none;} 
    #poweredby-mob {display: block;} 
} 
@media (min-width: 720px) { 
    #poweredby {text-align: center;margin: -10px 0 -13px 0;display: block;} 
    #poweredby-mob {display: none!important;} 
} 

Другое дело, что может помочь, чтобы выбрать «по умолчанию», будь то мобильный или не мобильны и установить те стиль вне каких-либо запросов СМИ. Затем используйте медиа-запросы только для переопределения, когда это необходимо. Это уменьшает вероятность человеческой ошибки.