Media Query-Like Behaviour on Width of a Specific Div

Media Query-like behaviour on width of a specific div

Unfortunately there is not currently a way for a media query to target a div. Media queries can only target the screen, meaning the browser window, mobile device screen, TV screen, etc...

override @media screen rules for a specific div?

Yeah,

Give a class attribute to your divs, then apply a different class or ID to the div you don't want to be styled.

How to set a media query condition that can never be met?

In addition to the OP's answer, the not keyword is explained in the media queries specification.

2. Media
Queries

The logical NOT can be expressed through the not keyword. The
presence of the keyword not at the beginning of the media query
negates the result.

3.1. Error
Handling

User agents are to represent a media query as not all when one of
the specified media features is not known.

Use of this keyword makes it easy to "set a media query condition that can never be met", as requested in the question.

Here's how it works:

@media not screen and ( min-width: 1000px ) { body { background-color: green; } }

This means in the case where the screen size is wider than 1000px, do NOT execute this code. In other words, the media query will execute when the screen size is less than 1000px. It's equivalent to:

@media screen and ( max-width: 1000px ) { body { background-color: green; } }

Media query causing unexpected behaviour

One problem is this:

The first:

@media only screen
  and (min-width:991px)
  and (max-width:1999px)

The segment of pixel-widths here is [991; 1999];

The second:

@media only screen
  and (min-width: 1200px)

The segment of pixel-widths here is [1200; +infinite]

If you take a look at those two arrays of pixel-widths: there are some elements that are included in both media queries: [1200; 1999];

That will result in an error, becase they can't both run, when the condition is true for both of them.

Check for other problems like this.

Proper cascading media queries? / Odd media query behaviour on screen resize / refresh

Ok, I'm going to agree with @Michael 's comment and expand on it after fixing my issue and after a little more research. I'll adjust the title too in-case someone else stumbles across this issue.

Firstly my issue of the media queries being overridden - was my error. I wasn't using SCSS or grunt on this project so I missed an extra closing brace that confused chrome and chrome inspector.

#div {
   default code
}

@media only screen and (max-width:450px) {**}**
    #div {
        media query code;
    }
}

So when the page loaded at 430px, the erroneous media query code overwrote the default code. Then when I refreshed / resized the page, chrome freaked out. Inspector had the media query listed (so I didn't think there was an error) but the media query code was crossed out as if it had been overridden by another query. So use a validator.

As for the correct use of media queries, I agree with @Michael in that I feel using either

(min-width: Mpx)

(when designing mobile up) or

(max-width: Dpx)

(when designing desktop down) exclusively is the better DRY method, over defining ranges

(min-width: Xpx and max-width: Ypx)

since changing the range of one media query will mean changing the range of at least one other. Also I feel such ranges as the other answers given here are adaptive (even though the definition of adaptive / responsive seems to blur all over the net).

I've noticed that some sites which use these ranges look nice on those devices, but testing on different resolutions (and who can guess future ranges?!) these sites just look cropped or broken. But perhaps they were just implemented incorrectly...

With a responsive site (perhaps elastic?), defining media queries by eye where content is about to break, seems not only intuitive, but future-proof for any future devices. Content is always scaled to the screen, rather in blocks to predetermined (mostly apple) device widths.

So I've kept using solely

@media only screen and (max-width: 600px) { /random code }
@media only screen and (max-width: 500px) { /random code }
@media only screen and (max-width: 400px) { /random code }

Because its DRY (and would be more so with SCSS) and the default code aimed at desktop first is much easier to convert to IE8 than starting mobile first.

I hope this helps someone in the future.

Why does CSS flexbox not working with media query?

Changing the display or the flex direction of the container when the size is small should work:

@media all and (max-width:500px) {
    .column{
        width: 100%;
    }
    .container {
        display: block;
    }
}

Or:

@media all and (max-width:500px) {
    .column{
        width: 100%;
    }
    .container {
        flex-direction: column;
    }
}

as you can see in this demo:

https://codepen.io/jeprubio/pen/yLyGZPY

Why does the order of media queries matter in CSS?

That's by design of CSS — Cascading Style Sheet.

It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).

So, given this CSS

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

if the browser window is 350 pixels wide, the background will be blue, while with this CSS

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.

Finally, with

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

or

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

the background will be blue (with a 350 pixels wide window).

---

Related Topics