Problem with media queries not working in css-CodePudding

Hello i am having problems with media queries. I dont know what the problem is but looking at the colors it appears to not be working.

I am new to css but i tried to fix it by adding what is written below in my html document (after looking at other posts) however it does not seem to work still.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here is the code i have tried in my css document:

.newestpost {
    line-height: 20px;
    height: 400px;
    display: ;
    width: 600px;
    float: left;
    margin: 30px 50px;

    @media screen and (min-width: 1312px) and (max-width: 3000px)   
    {
        width: 100%;
        float: left;
        margin: ;
    }
}

CodePudding user response：

A @media query should be a top level statement, that contains CSS rules. You can't nest it inside a CSS rule.

Change it to this, and see if it works:

.newestpost {
    line-height: 20px;
    height: 400px;
    display: ;
    width: 600px;
    float: left;
    margin: 30px 50px;
}

@media screen and (min-width: 1312px) and (max-width: 3000px)   
{
    .newestpost {
        width: 100%;
        float: left;
        margin: ;
    }
}

CodePudding user response：

you should mention your css class in media. and you can't use @media inside of class...

.newestpost {
    line-height: 20px;
    height: 400px;
    display: ;
    width: 600px;
    float: left;
    margin: 30px 50px;
}

@media screen and (min-width: 1312px) and (max-width: 3000px)  { 
   .newestpost {
        width: 100%;
        float: left;
        margin: ;
    }
}

CodePudding user response：

First, you need to specify the class in the tag, where you need to apply the styling

.newestpost {
line-height: 20px;
height: 400px;
display: ;
width: 600px;
float: left;
margin: 30px 50px;
}

@media screen and (min-width: 1312px) and (max-width: 3000px)   
{
    .newestpost {
        width: 100%;
        float: left;
        margin: ;
    }
}