0

This question has been asked several times. I tried to apply solutions posted to my project, but I still can't get @media query working.

Here is my HTML code.

CSS code generated using POSTCSS using psotcss-neat plugin

<html>
<head>
    <title>Starter Template</title>
    <meta name="viewport" content="width=device-width" />

    <link rel="stylesheet" type="text/css" href="css/dest/grid.css" media="screen">
</head>
<body>
    <div class="container">
        <div class="col-6"><p>This is some text</p></div>
        <div class="col-6"><p>This is another some text</p></div>
        <div class="col-6"><p>Yet another some text</p></div>
        <div class="col-6"><p>Also, This is another some text</p></div>
    </div>
</body>

My CSS code 

.container:after 
{
    clear: both;

}

.container 
{
    max-width: 64em;
    margin-left: auto;
    margin-right: auto;
    *zoom: 1;
}
.container:before, .container:after 
{
    content: " ";
    display: table;
}
.col-6 
{
    @media screen and (max-width: 767.999px) 
    {
        display: block;
        float: left;
        margin-right: 2.35765160%;
        width: 100.00000000%;
        &:last-child 
        {
            margin-right: 0;
        }
    }

    display: block;
    float: left;
    margin-right: 2.35765160%;
    width: 48.82117420%;
    margin-right: 0
}
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
Bassam Aklan
  • 15
  • 5
  • You have to place the @media outside the `.col-6 { }` rule. CSS class nesting is not allowed. What did the webconsole of your browser say?? – Rene van der Lende Nov 03 '15 at 00:01
  • You are right. I think the problem is with my postcss plugin which didn't convert the code in to the right syntax. I may check with the developers of this plugin. – Bassam Aklan Nov 03 '15 at 04:07

1 Answers1

0

You have to place the @media outside the .col-6 { } rule. CSS class nesting is not allowed.

(placed here, so you can close the question...)

Rene van der Lende
  • 4,992
  • 2
  • 14
  • 25