CSS native variables not working in media queries
From the spec,
The
var()function can be used in place of any part of a value in
any property on an element. Thevar()function can not be used as
property names, selectors, or anything else besides property values.
(Doing so usually produces invalid syntax, or else a value whose
meaning has no connection to the variable.)
So no, you can't use it in a media query.
And that makes sense. Because you can set --mobile-breakpoint e.g. to :root, that is, the <html> element, and from there be inherited to other elements. But a media query is not an element, it does not inherit from <html>, so it can't work.
This is not what CSS variables are trying to accomplish. You can use a CSS preprocessor instead.
Problem with media queries not working in css
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: ;
}
}
Related Topics
Css3 Animation Not Working in Safari
How to Make a Sticky Footer Using Css
Css - Overflow: Scroll; - Always Show Vertical Scroll Bar
Match All Elements Having Class Name Starting With a Specific String
Ie7 Z-Index Issue - Context Menu
How to Make Generated Content Selectable
How to Use a Unitless CSS Variables and Later Add the Needed Unit
Html, CSS - Weird Invisible Margin Below Pictures
Bootstrap 4 - Navbar Items Outside the Collapse
Safari/Chrome (Webkit) - Cannot Hide Iframe Vertical Scrollbar
Css Transparent Curved Shape With Two Rounded Sides
Ie8 Display Inline-Block Not Working
Difference Between :Focus and :Active
Css Transition Shorthand With Multiple Properties
Offsetting Columns Is Not Working (Bootstrap V4.0.0-Beta)