Why does display:none not work here?

Question

I think the problem is that #header img does not work.

 #header img { border-style: solid; border-color: #000000; border-width: 5px; padding: 5px } @media only screen and (max-width: 840px) { #header img { display:none; } } 

 <h1><a href="index.html" id="logo"><img src="images/platzhalter.jpg" </a></h1> 

Answer 1

 #header img { border-style: solid; border-color: #000000; border-width: 5px; padding: 5px } @media only screen and (max-width: 840px) { #header img { display:none; } } 

 <h1><a href="index.html" id="logo"><img src="images/platzhalter.jpg" </a></h1> 

You don't have #header img, try to change #header with #logo

@media only screen and (max-width: 840px) { #logo img { display:none; } 

Answer 2

Did you mean #logo instead of #header ? You're also missing a trailing semi-colon at the end of padding: 5px .

This works for me:

#logo img 
{
    border-style: solid;
         border-color: #000000;
         border-width: 5px;
         padding: 5px;
}

@media only screen and (max-width: 840px) { #logo img { display:none; } } 

Answer 3

选择器#header img与代码段中的任何元素都不匹配，因为不存在具有id属性值header元素。