2

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: ;
    }
}
3
  • Please How to Ask and minimal reproducible example Commented Dec 9, 2021 at 10:10
  • 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. Commented Dec 9, 2021 at 10:11
  • sorry i did not think of that Commented Dec 9, 2021 at 10:12

3 Answers 3

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: ;
    }
}
Sign up to request clarification or add additional context in comments.

1 Comment

I believe if SASS is used, it supports writing media queries within a class.
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: ;
    }
}

Comments

1

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

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

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

3 Comments

<meta> is not a visible element
Yes, Agree @PeterB For example, where every they have implemented that styling. They need to use the same class name in the HTML tag
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.