CODEWITHSUNDEEP
cssmedia-queries
user3763566
user3763566

Reputation: 23

Higher resolution media query overrides lower resolution media query

I have multiple breakpoints using CSS media queries. My problem lies within the media query for 320px. When setting the viewport to 320px, the media query for 320px is not loaded. The media query for 640px is loaded instead of the query for 320px. Why?

My html:

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0">
<meta name="description" content="Web Design, Search Engine Optimization (SEO), Motion Graphics, Video Editing, Print, and Branding. - arisendesigns.com">
<meta name="keywords" content="Websites, Web Design, Web Developement, Interactive Design, Search Engine Optimization, SEO, Motion Graphics, Video Editing, Graphic Design, Print, Branding, Logo">

<title>Web Design, Search Engine Optimization (SEO), Motion Graphics, Video Editing, Print, and Branding. - arisendesigns.com</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link href='http://fonts.googleapis.com/css?family=Rajdhani:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/mediaQueries.css">



</head>


<body>

<section class="container clearfix">
    <section id="navBar" class="grid_12">
    </section>

    <header id="banner" class="grid_12">
        <div class="container headlineContainer">
            <h1>
                <p><strong>Creative</strong></p>
                <p><strong>Graphic • Web • Motion</strong></p>
                <p><strong>Designs</strong></p>
            </h1>
        </div>

        <div class="container arrowContainer">
            <div id="arrow">
                <img src="img/arrow.png" alt="Scroll Down">
            </div>
        </div>


    </header>

    <section class="stretch grid_12"></section>

    <footer id="footer" class="grid_12">
    </footer>

</section>

<script type="text/javascript" src="jscript/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jscript/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jscript/jquery.fittext.js"></script>
<script type="text/javascript">
    jQuery("h1, h2, h3, p").fitText(2)
</script>


</body>

</html>

My css:

/*******    Global Styles     ******************************************/

body {
font-family: 'Rajdhani', sans-serif;
color: #333;
font-size: 50px;
font-weight: 400;
}



img {
max-width: 100%;
}


/*******    Typography Styles     *************************************/

strong {
color: #fff;
font-weight: 500;
}

span #bold {
font-weight: 700;
}

h2 {
color: #333; 
}



/*******    Header Styles  *********************************************/

#banner {
background: #333 url('bg/banner.png') no-repeat right top;
background-size: cover;
height: 600px;
}

.headlineContainer {
height: 40%;
float: left;
padding-top: 12.5%;
font-size: .6em;
}

.headlineContainer h1 {
line-height: 0em;
text-align: center;
}

.arrowContainer {
float: left;
height: 10%;
padding-top: 10%;
}

#arrow {
height: 100%;
width: 7%;
margin: auto;
}

/*******    test styles  ***************************************/

.stretch    {
height: 2000px;
}

My media queries:

/*******    Tablet Landscape  *************************************/

@media(max-width: 1024px) {
#banner {
    height: 400px;
}

.headlineContainer {
    padding-top: 15%;
}

.arrowContainer {
    padding-top: 9%;
}
}

/*******    Tablet Portrait  *******************************/

@media(max-width: 768px) {
#banner {
    height: 300px;
}

.headlineContainer {
    padding-top: 13.5%;
}

.arrowContainer {
    padding-top: 7%;
}
}

/*******    Phone Landscape  **********************************************/

@media(max-width: 480px) {
.headlineContainer {
    padding-top: 12%;
}

.arrowContainer {
    padding-top: 2%;
}
}


/*******    Phone Portrait  ********************************/

@media(max-width: 320px) {
.headlineContainer {
    padding-top: 22%;
}

.arrowContainer {
    padding-top: 0;
}
}

/*******    Odd Breakpoints **************************/

@media(max-width: 1200px) {
#banner {
    height: 500px;
}

.headlineContainer {
    padding-top: 11.5%;
}

.arrowContainer {
    padding-top: 9%;
}

}

@media(max-width: 896px) {
#banner {
    height: 350px;
}

.headlineContainer {
    padding-top: 10.5%;
}

.arrowContainer {
    padding-top: 7%;
}
}

@media(max-width: 640px) {
#banner {
    height: 200px;
}

.headlineContainer {
    padding-top: 6.5%;
}

.arrowContainer {
    padding-top: 4%;
}

}

Upvotes: 2

Views: 1480

Answers (1)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60527

@media(max-width: 640px) applies to all sizes 640px and below, so the styles specified in this media query will also be applied to screen widths of 320px. Media queries do not increase the specificity of the CSS rules within. Because your @media(max-width: 640px) media query comes after @media(max-width: 320px), the rules of equal specificity in the larger media query will override those in the smaller media query.

The simplest fix would be to order your media queries from the largest screen size to smallest.

If you need more control, you can limit your media query to screens within a range of sizes using a combination of min-width and max-width.

@media (min-width:320px) and (max-width: 640px) {
}

Upvotes: 4

Related Questions