14177

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 <em>Resize</em> » <em>View Responsive Layouts</em> is showing some fall in different width device layouts.

For example:<br /> 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?

<h3>EDIT</h3>

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.

Answer1:

While developing, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#device-width" rel="nofollow">max-device-width</a> 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, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#width" rel="nofollow">max-width</a> 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.

Answer2:

Check <a href="http://codepen.io/anon/pen/iFCHj" rel="nofollow">http://codepen.io/anon/pen/iFCHj</a> 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.

Answer3:

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!

Recommend

  • Problem with sockets in C#
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • Condor job using DAG with some jobs needing to run the same host
  • Flot returns incorrect x value (mm/dd/yy - date) after zoom for stack bar chart
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • 'Enemy' was not declared in this scope?
  • Index.php as custom error page
  • Jquery Show & ScrollTop (or ScrollTo)
  • How to add regEx in angular filter
  • python: forcing relative imports to search from script file
  • Python 3.2.2, error(scripts to exe)
  • PayPal API Listener Website Payments Standard URI
  • redirect_to root_url and return unless @user.activated
  • Center align outputs in ipython notebook
  • Execute scripts AJAX returns
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • Webgrid not refreshing after delete MVC
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • Test if a set exists before trying to drop it
  • Jquery UI tool tip close icon
  • req.body is undefined - nodejs
  • HTML download movie download link
  • Updating server-side rendering client-side
  • Modifying destination and filename of gulp-svg-sprite
  • Importing jscolor library in angular 2
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Traverse Array and Display in markup
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Change div Background jquery
  • Qt: Run a script BEFORE make
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • apache spark aggregate function using min value
  • Append folder name and increment by 1 using batch script
  • Binding checkboxes to object values in AngularJs