Почему Не срабатывает в margin top через @media?

Question

[Greg Plitt]

"Десктопный" margin-top обрабатывается нормально, а в мобильной версии какие значения не ставь, никаких изменений не вижу. Проверяю на этой странице (чб картинку)

.single-featured-image-header img {
	
	height: 25%;
	margin-top: 40px;
	width: 25%;
}

@media only screen and (max-device-width: 480px) {
.single-featured-image-header img {
width: 100%; 
height: 100%;
margin-top: 40px;
}
}

Answer 1

[Владимир Проскурин]

Потому, что стоит переопределение

@media only screen and (max-width: 767px)
.single-featured-image-header img {
    margin-top: -22px;
}

строка 569 файл responsive.css

Сделайте себе за правило. Если вы верстаете desktop-first (от большей версии к мобильной), то медиа запросы должны идти в порядке убывания, чтобы для маленького разрешения был больший приоритет. Ну или используйте диапазоны в медиазапросах.

Answer 2

[lagudal]

ну или как крайний вариант использовать !important