Why is the image not responding to CSS changes?

Question

css

Here is the BW image, on this page https://f8t.ru/trenirovki-rostov/ should have been stretched in the mobile version, but remained reduced as it is.
Code in 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%;
}
}

Can you tell me why the CSS is not working?

Answer 1

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

Answer 2

It looks like you are setting the rule to the div, not the image.

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

So everything will be fine, as you need.