html - Why isn't this media query display none not working? -


i'm trying have mobile-style.css hide background @ 640px. works on chrome not in firefox nor mobile safari? works offline firefox not on server? very strange.

        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />         <link href="css/style-mobile.css" rel="stylesheet" type="text/css" media="all" />         <link href="css/muscle-map.css" rel="stylesheet" type="text/css" media="all" />       </head>        <body>          <div id="muscle-map">           <img id="background" src="crops/00. blank figures.jpg" />           <img id="biceps-a" src="crops/05.a biceps.png" />           <img id="biceps-b" src="crops/05.b biceps.png" />           <img id="obliques" src="crops/04. obliques.png" />          </div>       </body> 

style.css

  #muscle-map {          position: relative;        }   #background {    width: 100%;   }     #muscle-map > img:not(#background) {     display: block;     position: absolute;     transition: opacity 0.2s;     opacity: 0;   }    #muscle-map > img:not(#background):hover {     opacity: 1;   }     #muscle-map > #biceps-a {     top: 30%;     left: 23.9%;     width: 3.6%;   }    #muscle-map > #biceps-b {     top: 30.0%;     left: 37.9%;     width: 3.8%;   }      #muscle-map > #obliques {     top: 31.6%;     left: 27.3%;     width:10.8%;   }     #muscle-map > #quads-b {     top: 47%;     left: 27.22%;     width: 2.8%;   }    #muscle-map > #quads-a {     top: 46.5%;     left: 35.3%;     width:3%;   } 

style-mobile.css

 @media screen , (max-width: 640px) {         #background {             display:none;             }             } 

i suggest using background property css instead of using img background cause issues on or other browsers. add path of image in css file , change property none in media query , go. also, please make sure image path or image name not having blank spaces in it. try replace spaces '-' or '_'.

for example:

#muscle-map {     position: relative;     background: url("crops/00.-blank-figures.jpg") 0 0;     background-size: 100%; }  @media screen , (max-width: 640px) {     #background {        background: none;     } } 

Comments

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

c# - MSDN OneNote Api: Navigate to never before opened page without opening a OneNote Application Window -