Media queries stop working after certain size

hamburgerlove413 · October 19, 2013

Hello,

I'm trying to use the responsive grid system (responsivegridsystem.com) to layout a webpage, but I'm running into a strange problem. The media queries used in the head section work fine for the first two sizes, but once the screen is brought below 768px, they stop working and it reverts back to the main style sheet. I cannot figure out what in the code is wrong. With the exact same style sheets, their example page works perfectly fine. When i copy the code from the body of my page to theirs, it stops working, so I figure there's something wrong in that area. Anyone have any ideas as to what could be the issue?

html:

<!DOCTYPE html>

<html>
<head>

	<meta charset="utf-8">

	<title>home - Nicholas Barna</title>

	<link rel="shortcut icon" href="/favicon.ico">

	<!-- Responsive and mobile friendly stuff -->
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <!--google fonts-->
    <link href='http://fonts.googleapis.com/css?family=Neuton' rel='stylesheet' type='text/css'>
    
	<!-- Stylesheets -->
	<link rel="stylesheet" href="css/html5reset.css" media="all">
	<link rel="stylesheet" href="css/col.css" media="all">
    <link rel="stylesheet" href="css/styles.css" media="all">
	<link rel="stylesheet" href="css/12cols.css" media="all">

	<!-- Responsive Stylesheets -->
    <link rel="stylesheet" media="only screen and (max-width: 1280px) and (min-width: 1025px)" href="css/1280.css">
	<link rel="stylesheet" media="only screen and (max-width: 1024px) and (min-width: 769px)" href="css/1024.css">
	<link rel="stylesheet" media="only screen and (max-width: 768px) and (min-width: 481px)" href="/css/768.css">
	<link rel="stylesheet" media="only screen and (max-width: 480px)" href="/css/480.css">

</head>

<body>

<div id="navWrap">

	<div class="globalWidth">

        <div class="section group">
    
            <nav id="mainNav" class="span_9_of_12">
            
                <ul>
                
                    <li><a href="#">home</a></li>
                    <li><a href="#">about</a></li>
                    <li><a href="#">stats</a></li>
                    <li><a href="#">time</a></li>
                    <li><a href="#">contact</a></li>
                
                </ul>
                
            </nav>
            
            <nav id="loginNav" class="span_3_of_12">
            
                <ul>
                    
                    <li><a href="#">login</a></li>
                    <li><a href="#">register</a></li>  
                    
                </ul>      
            
            </nav>
            
        </div>
        
	</div>
    
</div>		<!--end of nav wrapper-->


</body>
</html>

my style sheet:

/* basic tags */

a {
	text-decoration: none;
}

li {
	font-size: 1.4em;
}

/* Layout */

body {
	background: url(../img/background.jpg) no-repeat center center fixed; font-family: "Neuton", "Times New Roman", serif;   -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover;
}

.globalWidth {
	width: 960px; margin: 0 auto;
}

nav li {
	display: inline;
}

nav a {
	color: white;
}

nav a:hover {
	color: #bdbdbd;
}


#navWrap {

background: rgb(42, 0, 43); background: rgba(42, 0, 43, .77); 
	
}

#mainNav {
	background-color: #cccccc; margin: 20px 0; float: left;
}


#mainNav li {
	margin-right: 6%;
}

#mainNav a {
 font-family: 'deliciousroman', arial, helvetia, sans-serif; text-transform: uppercase; font-size: 1.6em;
}

#loginNav {
	text-align: right; background-color: #cccccc;  margin: 20px 0; float: right;
}

#loginNav li {
	margin-left: 6%;
}

/*  GLOBAL OBJECTS */

.breaker { clear: both; }

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}


.floatleft {
    float: left;
}

.floatright {
    float: right;
}

/* fonts */

@font-face {
    font-family: 'deliciousroman';
    src: url('../fonts/delicious-roman-webfont.eot');
    src: url('../fonts/delicious-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/delicious-roman-webfont.woff') format('woff'),
         url('../fonts/delicious-roman-webfont.ttf') format('truetype'),
         url('../fonts/delicious-roman-webfont.svg#deliciousroman') format('svg');
    font-weight: normal;
    font-style: normal;

}

there are a couple more style sheets used, but theyre for setting up the width of the columns in percentages (the span_3_of_12 stuff), and my 1280 style sheet which takes the .globalWidth: 960px and changes it to 80% (which should translate to all screen sizes below it, but it stops before 768px). I didnt want to include all of this in the code above for easier reading, but if I should, let me know.

cyberRobot · October 20, 2013

Perhaps the path to the 768.css and 480.css files isn't correct? Your first two responsive stylesheets are linked using document-relative links. The 768 and 480 stylesheets use root-relative links. Try removing the slash before "css" in the following lines:

<link rel="stylesheet" media="only screen and (max-width: 768px) and (min-width: 481px)" href="/css/768.css">
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="/css/480.css">

hamburgerlove413 · October 20, 2013

gah, that was it. I hate trying to find an issue for hours and than have it turn out to be something like that. It's strange though, the example page they provide that works has slashes before each path.

Sign In

Media queries stop working after certain size

Recommended Posts

hamburgerlove413

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

hamburgerlove413

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information