Why my responsive CSS is not taking media width?

Question

As the title's saying, I can't set media screen width-specific CSS for my PHP webpage.

Here is my <head> section of my index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <title><?php echo SITENAME; ?> - <?php echo SITEDESC; ?></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" /> <!-- for responsive coding, the "Viewport" meta tag -->

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type='text/javascript' src='scripts/respond.min.js'></script> <!-- for responsive mobile themes -->

    <link type="text/css" rel="stylesheet" href="style.css"/>        
        
</head>

For my HTML element <header> ... </header>, in my CSS (in style.css), I specified:

header{
    background: #1e5799;
    min-height: 40px;
    max-height: 136px;
}

But using "Web Developer" toolbar's Resize » View Responsive Layouts is showing some fall in different width device layouts.

For example:
In my <header> tag, the inner elements are getting out, so I need to increase the height of the header. So I specified in style.css:

/* Media Queries for Different Types of Mobile Devices */

/* Mobile portrait (320 x 480) */

@media all and (max-device-width: 320px) {

    header{
        height: 136px !important;
        background-color: #FF0000;
    }

}

But it's not working. :(

What am I missing about responsive CSS?

EDIT

After the first 2 answers, with their suggestions, I tried using:

@media screen and (max-width: 320px) {

    header{
        height: 136px !important;
        background-color: #FF0000;
    }

}

And yes, I put my media CSS at the bottom of style.css.

I also tried separating the mobile.css as:

<link type="text/css" rel="stylesheet" media="screen and (max-device-width: 480px)" href="css/mobile.css" />

Where I tried placing the following code:

header{
    height: 130px;
}

Still it's not working.

score 3 · Accepted Answer · answered Sep 14 '13 at 10:57

3

While developing, max-device-width will not help you visualizing the changes on window resize, because this particular media query targets the actual device size (which, on your computer, would be your monitor, not the browser window).

On the other hand, max-width targets the browser window width, so works perfectly on resize.

Unless you want to target specifically smaller devices (and not be responsive on window resize), I would suggest to go for max-width instead.

answered Sep 14 '13 at 10:57

NinGen ShinRa

651
5
16

Thanks a lot. But I checked using `@media screen and (max-width: 320px)` too. It's still not working. – Mayeenul Islam Sep 14 '13 at 11:04
Is your website online somewhere I can actually inspect it? If not, could you make a [SSCCE](http://sscce.org/) (i.e. minimal working example)? – NinGen ShinRa Sep 14 '13 at 11:07
@MayeenulIslam You're using a far to small value on width, for your layout as it is now you need a minimum of 800px. – Sam Pettersson Sep 14 '13 at 11:16
*for your layout as it is now you need a minimum of 800px* - How do you say that? Yes, I've seen it's best viewed in min-width 800px. But using the mouse-wheel I can squeeze the whole site to even 320px. I want the header to be fixed for width 320px. Is it impossible? – Mayeenul Islam Sep 14 '13 at 11:20
@MayeenulIslam i used the inspector in chrome and adjusted the window and found out the layout was breaking at around 800px? What about the mouse wheel? – Sam Pettersson Sep 14 '13 at 11:22
Yes, it's breaking. But if I get the media-width right in my CSS, then I can re-order or re-float them to different view for the mini-device width. But the question and actual problem was, the media-width specific CSS is not getting by the layout. – Mayeenul Islam Sep 14 '13 at 11:25
1

@MayeenulIslam Just write one media with a max-width of 800 and another with a max-width of 320, on the 800 you set the height and on the 320 you would then set it to position fixed? – Sam Pettersson Sep 14 '13 at 11:25

score 2 · Answer 2 · answered Sep 14 '13 at 10:53

2

Check http://codepen.io/anon/pen/iFCHj i normally max-width instead of max-device-width as you get a responsive layout across all devices.

Also, make sure that your responsive layout is beneath the main layout or the browser will ignore the media unless an !important is set on all.

answered Sep 14 '13 at 10:53

Sam Pettersson

3,049
6
23
37

Thanks a lot. But I checked using `@media screen and (max-width: 320px)` too. It's still not working. – Mayeenul Islam Sep 14 '13 at 11:03

score 1 · Answer 3 · answered Sep 14 '13 at 13:13

In addition to the other good suggestions, if you check the styling for the full header you have

header{
background: #1e5799; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzU0NzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #1e5799 0%, #135471 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#135471)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#135471 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 0%,#135471 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 0%,#135471 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1e5799 0%,#135471 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#135471',GradientType=0 ); /* IE6-8 */

/*border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -o-border-radius: 8px 8px 0 0;
 */
min-height: 40px;
max-height: 136px;
}

So for the 320 px viewport, in addition to writing new stlying for the height and background color, you need to over-ride the background image and IE filter

To remove the IE filter, something like

filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

should be good. You can probably figure out the background gradient.

Good luck!

Why my responsive CSS is not taking media width?

EDIT

3 Answers3

Linked