Search code examples
csshtmlresponsive-designmedia-queries

Media Queries not working at all

First of all, I'm a total rookie to Responsive Design.I'm having a trouble here. My media queries won't work and I've think I tried everything. Someone here who can spot the problem? Thank you in advance!

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css"/>
</head>

<body>
<div class="header">

</div>

<div class="imageContainer">
    <a href="#" class="wrapper">
        <span class="text">
            lorem ipsum
        </span>
        <img src="img/5.jpg" />
    </a>
</div>
<div class="imageContainer">
    <a href="#" class="wrapper">
        <span class="text">
            lorem ipsum
        </span>
        <img src="img/5.jpg" />
    </a>
</div>

<div class="imageContainer">
    <a href="#" class="wrapper">
        <span class="text">
            lorem ipsum
        </span>
        <img src="img/5.jpg" />
    </a>
</div>

<div class="imageContainer">
    <a href="#" class="wrapper">
        <span class="text">
            lorem ipsum
        </span>
        <img src="img/5.jpg" />
    </a>
</div>

<div class="imageContainer">
    <a href="#" class="wrapper">
        <span class="text">
            lorem ipsum
        </span>
        <img src="img/5.jpg" />
    </a>
</div>

<div class="imageContainer">
    <a href="#" class="wrapper">
        <span class="text">
            lorem ipsum
        </span>
        <img src="img/5.jpg" />
    </a>
</div>

<div class="clearfloats"></div>

<div class="footer">

</div>

</body>
</html>

CSS:

body {
    margin:0;
    padding:0;
    background:#000000;
}   

.header { 
    height:170px;
    width:auto;
    padding-top:30px;
    background:#FFFFFF;
}

.imageContainer {
    position: relative;
    width: 33.333%;
    padding-bottom: 26%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index:1;
}

.clearfloats {
    clear:both;
}

.footer { 
    height:200px;
    width:auto;
    background:#000;
}

@media screen and (max-width 1024px) {
    .imageContainer {
    position: relative;
    width: 50%;
    padding-bottom: 36%;
    float: left;
    height: 0;
    }
}
Solution

  • You are missing a : in your media query. Also, leave out spaces in between the brackets for safety.

    @media screen and (max-width:1024px)