Not (Max-Width: 512Px) Not Working

not (max-width: 512px) not working

You can use the following media query:

@media not all and (max-width: 512px) {  * {     color: red;  } }

<span>Foobar</span>

Is there a way to negate @media min/max-width/height?

Try this

@media not all and (min-width: 500px) {
  //selectors
}

You may also try depending upon your needs,

@media not screen and (device-width:500px)

This doesn't work

 not (min-width: 500px) {}

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

CSS width 100% OR max-width in pixels

That's in fact the intended use of max-width. If the computed (actual) width of an element exceeds max-width, it will be constrained to the max value instead of going beyond it. Percentage versus pixels isn't relevant.

Declare both in the same rule like this (no need for the calc() function):

#somediv {
    width: 100%;
    max-width: 512px;
}

I can't get images to the same size [HTML/CSS]

You can just make the parent tag of 512*512. then just make the image to be
width:100%; height:100%;

Also check from inspect if the images are overflowing or not if yes then overflow:hidden

What does @media screen and (max-width: 1024px) mean in CSS?

That’s a media query. It prevents the CSS inside it from being run unless the browser passes the tests it contains.

The tests in this media query are:

1. @media screen — The browser identifies itself as being in the “screen” category. This roughly means the browser considers itself desktop-class — as opposed to e.g. an older mobile phone browser (note that the iPhone, and other smartphone browsers, do identify themselves as being in the screen category), or a screenreader — and that it’s displaying the page on-screen, rather than printing it.

2. max-width: 1024px — the width of the browser window (including the scroll bar) is 1024 pixels or less. (CSS pixels, not device pixels.)

That second test suggests this is intended to limit the CSS to the iPad, iPhone, and similar devices (because some older browsers don’t support max-width in media queries, and a lot of desktop browsers are run wider than 1024 pixels).

However, it will also apply to desktop browser windows less than 1024 pixels wide, in browsers that support the max-width media query.

Here’s the Media Queries spec, it’s pretty readable:

• http://www.w3.org/TR/css3-mediaqueries/

Images won't resize below certain browser's width

It looks to me like the problem is caused by the rule for body starting at line 1 of http://vanfolmert.com/opta_single/css/default.css

Try commenting out or rethinking the min-width

body {
    background-color: #273B42;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-top: 61px;
    /* min-width: 480px; */
    font-family: 'Open Sans', cursive, sans-serif;
    font-size: 14px;
}  

Hope this helps!

Element's max-width 50% of parent's max-width?

I'd suggest you define parent's width as a constant :

const parentWidth = 1024;

and then use it for both parent and child styled-components :

const Parent = styled.div`
  max-width: ${parentWidth}px;
`;

const Child = styled.div`
  max-width: ${parentWidth / 2}px;
`;

Image sizes attribute with both min-width and max-width ignored by Firefox

After filing a Bugzilla report, it was marked as a duplicate of this bug:

https://bugzilla.mozilla.org/show_bug.cgi?id=1422225

Apparently Firefox does not yet support the syntax for combining media queries within the sizes attribute, even though it does support it within CSS and the JavaScript matchMedia function. The bug is marked as fixed with a target of Firefox 63.

---

Related Topics