Why doesn't it fire on margin top via @media?

Question

css

The "desktop" margin-top is processed normally, but in the mobile version, no matter what values ​​you set, I don't see any changes. I check on this page (bw image)

.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

'Cause it's worth redefining

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

line 569 of the responsive.css file
Make it a rule for yourself. If you're rendering desktop-first (large to mobile), then media queries should be in descending order so that smaller resolutions have higher priority. Well, or use ranges in media queries.

Answer 2

well, or as an extreme option, use !important