{"action":"created","issue":{"url":"https://api.github.com/repos/vmware/clarity/issues/263","repository_url":"https://api.github.com/repos/vmware/clarity","labels_url":"https://api.github.com/repos/vmware/clarity/issues/263/labels{/name}","comments_url":"https://api.github.com/repos/vmware/clarity/issues/263/comments","events_url":"https://api.github.com/repos/vmware/clarity/issues/263/events","html_url":"https://github.com/vmware/clarity/issues/263","id":196290242,"number":263,"title":"Breakpoints in mobile devices with different pixel ratios or screen densities","user":{"login":"Papipo","id":22678,"avatar_url":"https://avatars.githubusercontent.com/u/22678?v=3","gravatar_id":"","url":"https://api.github.com/users/Papipo","html_url":"https://github.com/Papipo","followers_url":"https://api.github.com/users/Papipo/followers","following_url":"https://api.github.com/users/Papipo/following{/other_user}","gists_url":"https://api.github.com/users/Papipo/gists{/gist_id}","starred_url":"https://api.github.com/users/Papipo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Papipo/subscriptions","organizations_url":"https://api.github.com/users/Papipo/orgs","repos_url":"https://api.github.com/users/Papipo/repos","events_url":"https://api.github.com/users/Papipo/events{/privacy}","received_events_url":"https://api.github.com/users/Papipo/received_events","type":"User","site_admin":false},"labels":[{"id":452262116,"url":"https://api.github.com/repos/vmware/clarity/labels/bug","name":"bug","color":"E62700","default":true},{"id":473349721,"url":"https://api.github.com/repos/vmware/clarity/labels/ClarityUI","name":"ClarityUI","color":"b60205","default":false},{"id":495334775,"url":"https://api.github.com/repos/vmware/clarity/labels/contributions%20welcome","name":"contributions welcome","color":"62A420","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-12-18T18:20:32Z","updated_at":"2016-12-19T15:22:29Z","closed_at":null,"body":"**Select one ...**  (check one with \"x\")\r\n```\r\n[x] bug\r\n[ ] feature request\r\n[ ] enhancement\r\n```\r\n\r\n### Expected behavior\r\nI expect media queries to take into account pixel ratios / screen density (not sure what's the term here). In an LG G3, inline radios should be inline, and header branding should be longer than 144px (to give a couple of examples).\r\n\r\n### Actual behavior\r\nIn my LG G3, I see inline radios stacked, or header branding with 144px of max-width.\r\n\r\nThe reason is that they are affected by the smallest breakpoint of 544px. I know that the device reports a width of 360px, but in a real use case, you don't expect this behaviour.\r\n\r\n### Environment details\r\n\r\n* **Browser:** Crosswalk under android. It's a Cordova application.\r\n"},"comment":{"url":"https://api.github.com/repos/vmware/clarity/issues/comments/267990865","html_url":"https://github.com/vmware/clarity/issues/263#issuecomment-267990865","issue_url":"https://api.github.com/repos/vmware/clarity/issues/263","id":267990865,"user":{"login":"adityarb88","id":1426805,"avatar_url":"https://avatars.githubusercontent.com/u/1426805?v=3","gravatar_id":"","url":"https://api.github.com/users/adityarb88","html_url":"https://github.com/adityarb88","followers_url":"https://api.github.com/users/adityarb88/followers","following_url":"https://api.github.com/users/adityarb88/following{/other_user}","gists_url":"https://api.github.com/users/adityarb88/gists{/gist_id}","starred_url":"https://api.github.com/users/adityarb88/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adityarb88/subscriptions","organizations_url":"https://api.github.com/users/adityarb88/orgs","repos_url":"https://api.github.com/users/adityarb88/repos","events_url":"https://api.github.com/users/adityarb88/events{/privacy}","received_events_url":"https://api.github.com/users/adityarb88/received_events","type":"User","site_admin":false},"created_at":"2016-12-19T15:22:29Z","updated_at":"2016-12-19T15:22:29Z","body":"Hi @Papipo,\r\n\r\nBranding Area:\r\nThe reason our branding area is 144px our header supports 4 sections. There is no way for us to detect what follows the branding area using just CSS and thats why we have limited it to 144px. If we don't limit it to 144px there is a chance that it might overlap with the other sections. If you don't have additional sections on your header, i would recommend that you override the max-width at your end for now (I say for now because we are in process to implement our search and header-actions functionality and if we feel that the responsive solution for search and header-actions ends up giving us more space on the header, we might increase the max-width or get rid of it altogether)\r\n\r\nInline Checkbox:\r\nOur UX team recommends that the checkboxes be stacked on smaller screens because in most cases having more than 1 checkbox in the same line will cause the text to wrap.\r\n\r\nI will remove the `bug` and `contributions welcome` labels for now and instead assign it to our UX team for their feedback before changing anything.\r\n\r\n"}}
{"actor":{"display_login":"adityarb88"}}