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

Edited by vinpkl
Link to comment
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.

Link to comment
Share on other sites

I am also pretty sure that its not your code and rather the emulator.  If you paste it into a link and put the link in the post I have a buddy with  a Nexus 4, who can go check it out on his device to se if it actually reders like the emulator.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.