-1

So I want my image to be automatically resized when screen resolution is under 740 pixels. This code is outside @media.

header img {
  display: block;
  height: 150px;
  margin: auto;
}

@media screen and (max-width: 740px) {
  header img {
    display: block;
    width: 100%;
    height: auto;
  }
}
<header>
  <img src="https://images.vexels.com/media/users/3/137694/isolated/lists/35e10823069d1767521320dc34475465-triangle-logo-geometric.png">
</header>

This code is not working! Why? When I check the code in chrom dev tools, these properties are deleted out except width:100%;!

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Toms Eglite
  • 349
  • 1
  • 4
  • 13
  • 1
    I converted your code into a live demo and can't reproduce the problem. (The code you included in the question was missing the `}` at the end but I assume that was a transcription error. If it wasn't, then your problem was caused by a typo.) – Quentin Dec 08 '17 at 00:12

1 Answers1

-2

The first definition is the default style. Add !important to enforce the screen style

@media screen and (max-width: 740px){
   header img{
       height:auto !important;
   }
Nerds of Technology
  • 197
  • 7
  • 2
    The selectors have equal specificity and are applied in order. Adding `!important` should have no effect on this at all. – Quentin Dec 08 '17 at 00:08
  • Worked out for me. – Toms Eglite Dec 08 '17 at 00:11
  • @TomsEglite — Most likely: (1) You hit a cached version of the CSS when you tested (2) You changed the CSS in your text editor and didn't properly save the changes before testing them. (3) The code in the question is not a true representation of the code causing the problem. Adding `!important` doesn't make a difference here. – Quentin Dec 08 '17 at 00:14
  • See also: https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – Quentin Dec 08 '17 at 00:15