Why my responsive CSS is not taking media width?

Question

Why my responsive CSS is not taking media width?

3k views Asked by Mayeenul Islam At 14 September 2013 at 10:49

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.

Original Q&A

There are 3 answers

Sam Pettersson On 14 September 2013 at 10:53

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.

David Taiaroa On 14 September 2013 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!

**NinGen ShinRa** · Accepted Answer · 2013-09-14 10:57:47

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.

TechQA.

Why my responsive CSS is not taking media width?

EDIT

There are 3 answers

Related Questions in CSS

Related Questions in RESPONSIVE-DESIGN

Related Questions in DEVICE-WIDTH

Popular Questions

Popular Tags

Trending Questions