1

I am working on an adaptive website design and am using specific css media queries to match a small display width.

For small displays I am using:

@media screen and (max-width: 34em) {}

For bigger displays I am using:

@media screen and (min-width: 34em) {}

This works quite well so far. However, I have notice that there is a certain width of the window where the styles from both media queries seem to be mixed together. (It definitely isn't the case that no query is applied.) This surely is an edge case, but probably there is someone out there surfing with that specific window or screen width and is seeing a weird looking page. Therefore I was wondering why this problem exists and what I could do about it. I have tried this both on Safari and Firefox on a mac and both showed the same effect.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
st-h
  • 2,444
  • 6
  • 37
  • 60

3 Answers3

4

However, I have notice that there is a certain width of the window where the styles from both media queries seem to be mixed together. (It definitely isn't the case that no query is applied.)

Correct; instead, both of them are being applied, and that's when the width of the viewport exactly equals 34 ems. What happens then is that the cascade applies as usual. See my answer to the following question for an explanation:

What are the rules for CSS media query overlap?

The easiest way to handle this for two ranges of screen sizes is to utilize the cascade, but differently from what you have: by writing your rules generally for one screen size, and only including a media query for the other screen size as shown in dwreck08's answer.

Otherwise, if you want exactly one rule to be applied at a time without relying on the cascade to override your styles, use either min-width or max-width only, and negate it in the other rule with the not keyword. As an example, you can have either this:

@media screen and (max-width: 34em) {}     /* Smaller screen sizes */
@media not screen and (max-width: 34em) {} /* Larger screen sizes */

Or this:

@media not screen and (min-width: 34em) {} /* Smaller screen sizes */
@media screen and (min-width: 34em) {}     /* Larger screen sizes */

The ordering does not matter because not makes these rules mutually exclusive — at least, in the browsers that understand the keyword, which as far as I know is all of them that support media queries anyway.

My answer to this question, which is a follow-up to the one linked above, offers another explanation:

How can I avoid media query overlap?

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
1

It looks like you are only needing two possibilities for styling. Therefore, I think you should be able to remove the max width query and just style it as you normally would to achieve the desired outcome. 

  #divName {
  properties: here;
}

@media screen and (min-width: 34em) {
  #divName {
   properties: here;
   }
}
Derek Story
  • 9,518
  • 1
  • 24
  • 34
  • Probably this is just a lack of CSS knowledge on my side here, but won't this just work if I override the general style with the specific ones for big displays? I.e. general styles will still apply unless they are overridden? – st-h Jun 18 '13 at 20:33
  • Because you had a max query and a min query of the same width, there were only two outcomes that could happen. If you make the min a smaller width than the max, they won't overlap. Then you could have three possibilties, a small screen, normal screen (no query) and a large screen. – Derek Story Jun 18 '13 at 20:43
  • Probably my question wasn't that clear. I wanted to have exactly 2 designs. One for large windows and one for small windows. But I ended up with one for small windows, one for big windows and a strange edge case, which only shows at a certain window size - seems like you have to match the width within a pixel accuracy. I just want to get rid of that silly edge case. But probably I need to embrace the mobile first approach to get rid of that side effect. Would be curious to know why this happens, though.. – st-h Jun 18 '13 at 20:51
  • You only need one query in that case. Style your div without any querys. then for your mobile add a max-width query. This will tell it to style it as a normal (large) screen unless the width of the screen is smaller than the max-width specified. The reason it is getting confused is due to each query being equivilant widths. When the screen equals 34em, it doesn't know which query to to follow. Only using one query will eliminate that. – Derek Story Jun 18 '13 at 20:55
  • @dwreck08: It does know: it uses *both* of them. That's standard behavior. – BoltClock Jun 18 '13 at 21:02
  • @dwreck08 so, that would still mean, I need to style everything for big screens with no constraints and then override everything I had previously set in order to create a mobile design. This would in some cases mean that I will be setting something for the big screen design and resetting it to the default value for mobile design or vice versa. That does not sound too nice... I hoped there would be a cleaner way to do this. – st-h Jun 18 '13 at 21:08
  • http://jsfiddle.net/derekstory/5n7h2/ You only need to change the values that need changed in the query. All of the other values will stay the same. See the fiddle for a very basic example. Even though the query doesn't specify underline, it takes that from the non-queried style... – Derek Story Jun 18 '13 at 21:19
  • Probably this is just a misunderstanding. Please see the updated fiddle http://jsfiddle.net/5n7h2/1/ . The default style for #test always applies. So, if I decided that green does not look so nice on a mobile device and the default color would be much nicer, I would have to reset the mobile specific style to the default value for the color attribute. Using BoltClock's approach, this is no longer needed. Please see http://jsfiddle.net/5n7h2/2/ . This allows to use general styles, and make mobile only and desktop only adjustments. – st-h Jun 18 '13 at 22:12
0

Maybe its the fact that you have both the min-width and also the max-width at 34em. So when the screen size is at exactly 34 em then both media queries are active.

You should try to change the value of the one side by one em and see how that works.

@media screen and (max-width: 34em) {}
@media screen and (min-width: 35em) {}
Pete D
  • 777
  • 5
  • 15
  • That does not work. This will leave a 'gap' where none of the styles is active. 34 < width < 35 – st-h Jun 18 '13 at 20:47