troubleshooting Question

How to correctly write CSS/HTML Media Queries in Document Head

Avatar of itkadmin
itkadminFlag for Canada asked on
Web DevelopmentCSSHTML
2 Comments1 Solution612 ViewsLast Modified:
Hello

I'm trying to put together a single page, text only HTML document that is responsive. I'd prefer not using an external stylesheet is this is something that will be sent around to various places. Keeping it to one file is easiest in this case.

I am having trouble with the media queries for screen sizes. They work fine on a desktop when I resize the window. They do not work when I look at the page on a mobile device. I've tried a samsung galaxy S4, an IPhone 4 and an iPad. All devices are showing the red background that is only supposed to show for a min width of 769 px.

file attached or you can look at http://www.crow.ws/test/index.html.

Any help is greatly appreciated

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test HTML5 and Media Queries</title>
<style>
/*media queries*/

	
@media print {
	body {
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
		}
		
	h1 {
		font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		}
	}
@media screen,handheld {
	body {
		font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		width: 80%;
		 max-width: 960px; 
		 margin: auto;
		}
}

@media all and (max-width: 480px) {
body {font-size: 3em; background-color: green;}

}
@media all and (min-width: 481px) and (max-width: 768px) {
	body {font-size: 1.75em; background-color: yellow;}

	}
@media all and (min-width: 769px) {
	body {font-size: 1.2em; background-color: red;}
	
	}

	
h1 {
	font-size: 2em;
	margin: 2em 0;
	text-align:center;
}

h2 {
	margin: 1.25em 0 0 0;
}

header p, .header {
	font-style:italic;
	text-align:center;
}

p {
	margin-top: 0px;
}

aside {
	font-style:italic;
}
</style>
</head>

<body>
<header>
<h1>This is the Title of the Document</h1>
<p class="header">Some info about the document <time datetime="2013-09-17">September 17, 2013</time>.</p>
</header>
<hr>
<article>
<h1>Article 1</h1>
<aside><p>an overview of this article for people who don't want to read all the details</p></aside>

      <p> Lorem ipsum sit amet, consectetur adipiscing elit. Pellentesque et   ligula diam. Vestibulum cursus posuere ante vel pulvinar. Praesent   vitae tincidunt lorem, et posuere dui. Vestibulum a turpis aliquam,   fringilla nibh eget, congue magna. Morbi feugiat arcu ut ante aliquam,   in facilisis neque pulvinar. Mauris blandit et tortor nec viverra.   Nullam eleifend lobortis gravida. Mauris nec tortor molestie, rutrum   eros quis, mattis magna. In id turpis sem. Donec suscipit nibh euismod   turpis mattis tincidunt. Quisque lobortis magna ut sem dignissim   sagittis. Sed rutrum magna vitae augue pellentesque tincidunt. Integer   fermentum diam augue, quis varius ante semper et. Nullam sit amet porta   tellus. Ut aliquam sodales elit id faucibus. Duis libero diam, laoreet   ullamcorper turpis quis, facilisis placerat enim. </p>
      <p> Curabitur accumsan a sem quis tempus. Aliquam orci diam, eleifend   laoreet porta ut, tempus et urna. Ut sodales, leo posuere semper congue,   sem velit pellentesque tellus, ut consequat urna orci at nisl. Integer   suscipit dolor turpis, quis consectetur est blandit at. Duis id risus eu   velit venenatis venenatis pulvinar eget risus. Maecenas sem arcu,   consequat quis urna tincidunt, sollicitudin tincidunt metus. Maecenas   eleifend imperdiet velit vel feugiat. Aliquam erat volutpat. </p>
</article>
<hr>
<footer>
	<address>
    My Name<br>
    555 Some <abbr title="Road">Rd.</abbr><br>
    Some Town, <abbr title="Massachusetts">MA</abbr><br>
    <abbr title="United States of America">USA</abbr>, 01230
    </address>

</body>
</html>
index.html
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 2 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros