Jump to content

css not working in chrome emulator


vinpkl

Recommended Posts

Hi

 

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

 

You can select devices like "Google nexus 4, Google nexus 5" or similar which has width less than 480

 

Border and padding is not getting applied.

 

Floating is also not working ??

<!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

Link to comment
https://forums.phpfreaks.com/topic/296125-css-not-working-in-chrome-emulator/
Share on other sites

Wow that is weird.  I tried to make it work too and I can't figure out why it won't.  It works in normal chrome and firefox.  I found this post about the possible issue iwth the chrome emulator http://stackoverflow.com/questions/26888751/chrome-device-mode-emulation-media-queries-not-working So I don't think it's your code, but rather the browser.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.