{"action":"created","issue":{"url":"https://api.github.com/repos/FormidableLabs/radium/issues/100","labels_url":"https://api.github.com/repos/FormidableLabs/radium/issues/100/labels{/name}","comments_url":"https://api.github.com/repos/FormidableLabs/radium/issues/100/comments","events_url":"https://api.github.com/repos/FormidableLabs/radium/issues/100/events","html_url":"https://github.com/FormidableLabs/radium/issues/100","id":65604349,"number":100,"title":"Media Queries not working for me","user":{"login":"benoneal","id":4063875,"avatar_url":"https://avatars.githubusercontent.com/u/4063875?v=3","gravatar_id":"","url":"https://api.github.com/users/benoneal","html_url":"https://github.com/benoneal","followers_url":"https://api.github.com/users/benoneal/followers","following_url":"https://api.github.com/users/benoneal/following{/other_user}","gists_url":"https://api.github.com/users/benoneal/gists{/gist_id}","starred_url":"https://api.github.com/users/benoneal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benoneal/subscriptions","organizations_url":"https://api.github.com/users/benoneal/orgs","repos_url":"https://api.github.com/users/benoneal/repos","events_url":"https://api.github.com/users/benoneal/events{/privacy}","received_events_url":"https://api.github.com/users/benoneal/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/FormidableLabs/radium/labels/bug","name":"bug","color":"fc2929"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-04-01T04:50:37Z","updated_at":"2015-04-27T21:13:59Z","closed_at":"2015-04-27T21:10:28Z","body":"I'm not sure why, but my media queries aren't working at all. In the top level component of the app, I've got: \r\n```\r\nvar { MatchMediaBase } = require('radium');\r\nMatchMediaBase.init({\r\n  tiny: '(min-width: 200px)',\r\n  small: '(min-width: 350px)',\r\n  mobile: '(min-width: 450px)',\r\n  medium: '(min-width: 500px)',\r\n  large: '(min-width: 650px)',\r\n  tablet: '(min-width: 700px)',\r\n  huge: '(min-width: 800px)',\r\n  laptop: '(min-width: 950px)',\r\n  desktop: '(min-width: 1200px)',\r\n  wide: '(min-width: 1450px)',\r\n  tinyMax: '(max-width: 199px)',\r\n  smallMax: '(max-width: 249px)',\r\n  mobileMax: '(max-width: 349px)',\r\n  mediumMax: '(max-width: 499px)',\r\n  largeMax: '(max-width: 549px)',\r\n  tabletMax: '(max-width: 699px)',\r\n  hugeMax: '(max-width: 799px)',\r\n  laptopMax: '(max-width: 849px)',\r\n  desktopMax: '(max-width: 1199px)',\r\n  wideMax: '(max-width: 1349px)'\r\n});\r\n...\r\nmixins: [MatchMediaBase]\r\n```\r\nAnd in my component I have: \r\n```\r\nvar { StyleResolverMixin, MatchMediaItem } = require('radium');\r\nmixins: [StyleResolverMixin, MatchMediaItem]\r\n```\r\nwith styles: \r\n```\r\nvar Logo = {\r\n  display: 'inline-block',\r\n  height: 32,\r\n  maxWidth: '100%',\r\n  padding: '0 30px',\r\n  lineHeight: '13px',\r\n  marginBottom: -8,\r\n\r\n  mediaQueries: [\r\n    { laptopMax: {\r\n      position: 'absolute',\r\n      top: '40%',\r\n      left: '50%',\r\n      transform: 'translateX(-50%) translateY(-50%)',\r\n      padding: 0,\r\n      margin: 0\r\n    }},\r\n    { mediumMax: {\r\n      top: 0,\r\n      transform: 'translateX(-50%)'\r\n    }}\r\n  ]\r\n};\r\n```\r\nBut these styles never seem to be applied at any browser width. In testing in the console, I get this:  \r\n```\r\nwindow.matchMedia('laptopMax')\r\nMediaQueryList {onchange: null, matches: false, media: \"laptopmax\", addListener: function, removeListener: function…}matches: falsemedia: \"laptopmax\"onchange: null__proto__: MediaQueryList\r\nwindow.matchMedia('mobile')\r\nMediaQueryList {onchange: null, matches: false, media: \"mobile\", addListener: function, removeListener: function…}matches: falsemedia: \"mobile\"onchange: null__proto__: MediaQueryList\r\nwindow.matchMedia('tiny')\r\nMediaQueryList {onchange: null, matches: false, media: \"tiny\", addListener: function, removeListener: function…}matches: falsemedia: \"tiny\"onchange: null__proto__: MediaQueryList\r\nwindow.matchMedia('wide');\r\nMediaQueryList {onchange: null, matches: false, media: \"wide\", addListener: function, removeListener: function…}matches: falsemedia: \"wide\"onchange: null__proto__: MediaQueryList\r\nwindow.matchMedia('wideMax');\r\nMediaQueryList {onchange: null, matches: false, media: \"widemax\", addListener: function, removeListener: function…}\r\n```\r\nSo on the surface, it looks like MatchMediaBase.init() isn't working for some reason, and matchMedia lowercases my key names (which would break them, but also isn't the problem). \r\n\r\nI'm assuming this is working for someone out there, so any ideas what I've missed?"},"comment":{"url":"https://api.github.com/repos/FormidableLabs/radium/issues/comments/96823499","html_url":"https://github.com/FormidableLabs/radium/issues/100#issuecomment-96823499","issue_url":"https://api.github.com/repos/FormidableLabs/radium/issues/100","id":96823499,"user":{"login":"alexlande","id":808159,"avatar_url":"https://avatars.githubusercontent.com/u/808159?v=3","gravatar_id":"","url":"https://api.github.com/users/alexlande","html_url":"https://github.com/alexlande","followers_url":"https://api.github.com/users/alexlande/followers","following_url":"https://api.github.com/users/alexlande/following{/other_user}","gists_url":"https://api.github.com/users/alexlande/gists{/gist_id}","starred_url":"https://api.github.com/users/alexlande/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexlande/subscriptions","organizations_url":"https://api.github.com/users/alexlande/orgs","repos_url":"https://api.github.com/users/alexlande/repos","events_url":"https://api.github.com/users/alexlande/events{/privacy}","received_events_url":"https://api.github.com/users/alexlande/received_events","type":"User","site_admin":false},"created_at":"2015-04-27T21:13:59Z","updated_at":"2015-04-27T21:13:59Z","body":"Ah, yeah. With the upcoming API we don't use context anymore, which solves that problem. There's an issue tracking this in React if anyone wants to read more about the general `context` + `shouldComponentUpdate` thing: https://github.com/facebook/react/issues/2517"}}