Problem with media queries not working in css

Question

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: ;
    }
}

Please always post your included code as text, not as images. Images may disappear, and even more importantly: you are now forcing people to re-type your code themselves in order to give suggestions on improving it. — Peter B
– Peter B, Commented Dec 9, 2021 at 10:11

Peter B · Accepted Answer · 2021-12-09 10:19:03Z

1

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: ;
    }
}

answered Dec 9, 2021 at 10:19

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pavan J Over a year ago

I believe if SASS is used, it supports writing media queries within a class.

Afsaneh Lotfi · Accepted Answer · 2021-12-09 10:22:10Z

1

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: ;
    }
}

answered Dec 9, 2021 at 10:22

Afsaneh Lotfi

562 bronze badges

Comments

Plutus · Accepted Answer · 2021-12-09 10:36:43Z

1

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: ;
    }
}

answered Dec 9, 2021 at 10:36

Plutus

1831 gold badge1 silver badge13 bronze badges

3 Comments

Peter B Over a year ago

<meta> is not a visible element

Plutus Over a year ago

Yes, Agree @PeterB For example, where every they have implemented that styling. They need to use the same class name in the HTML tag

Peter B Over a year ago

Indeed, but using <meta> to illustrate that is very much pointless. I am assuming they have put class="newestpost" already on a visual element where it would be useful. Putting a CSS class on a <meta> is by definition not useful.

Collectives™ on Stack Overflow

Problem with media queries not working in css

3 Answers 3

1 Comment

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Related