Why isn't this media query display none not working?
Question
I'm trying to have the mobile-style.css hide the background at 640px. This works on Chrome but not in Firefox nor mobile safari? It also works offline for Firefox but not on a server? Very 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 and (max-width: 640px) {
#background {
display:none;
}
}
1 answers
solution1
0 2015-07-27 11:22:41
I would suggest using background property from CSS instead of using an img as background as it will cause issues on some or the other browsers. Simply add the path of the image in the CSS file and change the property to none in media query and you are good to go. Also, please make sure that the image path or the image name is not having any blank spaces in it. Try to replace spaces with '-' or '_'.
For Example:
#muscle-map {
position: relative;
background: url("Crops/00.-Blank-Figures.jpg") 0 0;
background-size: 100%;
}
@media screen and (max-width: 640px) {
#background {
background: none;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.