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

Post a Comment

Popular posts from this blog

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

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

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

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more