Почему картинка не реагирует на изменения в CSS?

Question

[Greg Plitt]

Вот это ЧБ изображение, на данной странице https://f8t.ru/trenirovki-rostov/ должно было растянуться в мобильной версии, но осталось уменьшенной как есть.

Код в css:

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

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

Подскажите, почему не срабатывает CSS?

Answer 1

[Denis Kunitsyn]

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

Comments

[Greg Plitt]

Спасибо, теперь пытаюсь добавить отступ сверху, но в таком случае, обработка (отступа) не срабатывает.
Делаю так:

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

Answer 2

[dsmaslov]

Видимо, что вы задаёте правило div'у, а не картинке.

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

Так всё будет нормально, как и нужно вам.