Log in

View Full Version : css not working in chrome emulator


vinpkl
05-07-2015, 10:41 AM
Hi

can anyone tell me why this code is not working in chrome emulator

Red border and padding are not getting applied on firstcol and secondcol in chrome emulator.



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css" media="screen">
@media screen and (max-width:480px){
.firstcol{width:90%; border:1px solid #ff0000; padding:10px; font-size:2em}
.secondcol{width:90%; border:1px solid #ff0000; padding:10px; font-size:2em}
}
@media screen and (min-width:600px) and (max-width:800px){
.firstcol{width:42%; float:left; border:1px solid #ff0000; padding:10px; font-size:2em}
.secondcol{width:42%; float:left; border:1px solid #ff0000; padding:10px; font-size:2em}
}
</style>
</head>

<body>
<div class="firstcol">This is the first column</div>
<div class="secondcol">This is second column</div>
</body>
</html>



Thanks
Vineet
jscheuer1
05-07-2015, 12:37 PM
Maybe you're doing it wrong. It's working as expected in my Chrome Version 42.0.2311.135 m. You cannot activate the emulator until you click the icon for it on the developer tools main menu bar at the top of the main developer tools window. Just clicking on the emulator tab in the lower split screen (if active) of developer tools is not enough.

Or maybe you have an older version of Chrome and/or a different OS (I'm using Win 7 64 bit).

In any case, as I discovered earlier with a question about a similar utility included with Firefox, these emulators are sometimes buggy, and fixing those bugs seems to take a lower priority than fixing bugs in the actual browsers.

Oh, and with that css there is an intermediate width range from 480 to 600 where the styles are not applied. Perhaps your emulator's width is set within that range. BTW, these styles and screen/window widths can be tested in any supporting browser simply by narrowing and widening the browser window in the normal manner. No emulator is required.
vinpkl
05-07-2015, 12:52 PM
Hi John

Its strange. I am also having the same chrome version installed Version 42.0.2311

Its simple code but doesnt work on my system.

Vineet
jscheuer1
05-07-2015, 01:03 PM
Yeah, well I played with it a little and it stopped working. I've never used it before, well maybe once to look at it. But I never set it to a particular device. Once I did that, it stopped working. So I'm going to go with my (loosely) "Theses emulators are buggy" response from before as the most likely issue. But it might just be that because of some logic as to how screen widths are calculated, that - say an iPhone has a higher resolution than you think (more pixels at any rate - how the width is measured) and then to go and use the magnification tool on the right doesn't seem to correct/compensate this. But it still has to be a bug of some kind because the width and height are listed and the width is within range.

It might be that the native browser in that device doesn't support media queries, but I tend to doubt that. If you can find an online manual on how to use this tool, that might clear things up.

As I said though, when I first switched it on (too bad I didn't pay more attention to the initial settings) it was working fine.
jscheuer1
05-07-2015, 01:10 PM
You might be able to find some useful info here: https://developer.chrome.com/devtools/docs/device-mode
jscheuer1
05-07-2015, 01:15 PM
OK, trial and error. If I hit the reset button on the emulation tab in developer tools, and then check the the 'Emulate screen resolution' checkbox in that same tab, and leave the rest of the settings as they are, it works again.

Oh, and a quick Google around shows that there are a lot of complaints about this in particular and the the emulator in general. I think that they (Chrome developers) are still working on it and may have released it too soon.