Css not working in chrome responsive mode

HTML & CSS
1

Hi

I dont know why this code is not apllying the css in chrome responsive mode or emulator

Color is not getting applied ??
border is not getting applied ??
nor the padding ??

<!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; color:#FF0000}
.secondcol{width:90%; border:1px solid #ff0000; padding:10px; font-size:2em; color:#FF0000}
}
@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>

Its working in firefox. But not in chrome ??

Thanks
Vineet

2

I’m assuming it’s because you don’t have this

<meta name="viewport" content="width=device-width,initial-scale=1">

In your <head> section.

3

Hi Ryan

It was a perfect catch. YES it was due to missing viewport tag.

Another question i want to ask is

My phone has a resolution of 480x800

If i write the css as below and rotate my device in landscape mode (800x480), Then this below code doesnot applies to the page.

@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}
}

But If i write the css as below and rotate my device in landscape mode (800x480), Then this below code gets applies the page.

@media screen and (min-width:480px) 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}
}

In both the cases, when my device is in landscape mode, then its width is 800 so css should get apply in both cases, but only the second one gets applied.

Hope i am making my question clear ??

Thanks
Vineet

4

You need to read this article.

Specifically, here is a quote from my article.

device widths do not change simply because you rotate the device sideways.

You shouldn’t need so many media queries. You seem to be trying to target specific screens and devices. You say “your phone” - well what about devices that are a bit smaller or bigger? You’ll have to also write queries for them!

You are headed down a bad path, I believe.

5

Hi Ryan

Thats a great article to get to the right direction.

Handling full website with just 3 media queries makes the life easier.

Are all your project based on just 3 queries ??

Thanks
Vineet

6

3? Where did you get 3? The small/medium/large examples?

Generally I have the regular page (no queries), and then around tablet mode I’ll throw in a query for small changes…stacking columns, etc.

If I REALLY need a certain display on mobile I’ll throw in a second query for mobile-specific. Other htan that…no you really shouldn’t need that many.

7

Hi Ryan

i was talking about the example code in your article in which you have red, blue, green body color.

Well i think i will have to rethink and edit my media queries to make them future proof.

Thanks again for the right direction.

Vineet

8

That was purely an example and you shouldn’t read into that / the specific widths I did.

You make it future proof by forgetting devices exist. Code to make it fully fluid / responsive without worrying about devices. Worry how it scales. Devices will display fine accordingly.

9

Vinpkl - a good approach is to not have a preset of breakpoints or say “i’m creating media queries for laptop, tablet, and phone”. Instead shrink your browser, when your site breaks, you have a break point. Write a media query for that. Shrink, find a breakpoint and then write.

This is also a tremendous read: http://bradfrost.com/blog/post/atomic-web-design/

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.