{"action":"created","issue":{"url":"https://api.github.com/repos/chrsmith/html5rocks/issues/665","labels_url":"https://api.github.com/repos/chrsmith/html5rocks/issues/665/labels{/name}","comments_url":"https://api.github.com/repos/chrsmith/html5rocks/issues/665/comments","events_url":"https://api.github.com/repos/chrsmith/html5rocks/issues/665/events","html_url":"https://github.com/chrsmith/html5rocks/issues/665","id":60749402,"number":665,"title":"Slides are letter boxed and not scrollable when viewed in landscape orientation on a phone","user":{"login":"chrsmith","id":4029847,"avatar_url":"https://avatars.githubusercontent.com/u/4029847?v=3","gravatar_id":"","url":"https://api.github.com/users/chrsmith","html_url":"https://github.com/chrsmith","followers_url":"https://api.github.com/users/chrsmith/followers","following_url":"https://api.github.com/users/chrsmith/following{/other_user}","gists_url":"https://api.github.com/users/chrsmith/gists{/gist_id}","starred_url":"https://api.github.com/users/chrsmith/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chrsmith/subscriptions","organizations_url":"https://api.github.com/users/chrsmith/orgs","repos_url":"https://api.github.com/users/chrsmith/repos","events_url":"https://api.github.com/users/chrsmith/events{/privacy}","received_events_url":"https://api.github.com/users/chrsmith/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/chrsmith/html5rocks/labels/Milestone-Q12012","name":"Milestone-Q12012","color":"ededed"},{"url":"https://api.github.com/repos/chrsmith/html5rocks/labels/Priority-P2","name":"Priority-P2","color":"ededed"},{"url":"https://api.github.com/repos/chrsmith/html5rocks/labels/Slides","name":"Slides","color":"ededed"},{"url":"https://api.github.com/repos/chrsmith/html5rocks/labels/Type-Bug","name":"Type-Bug","color":"ededed"}],"state":"open","locked":false,"assignee":{"login":"chrsmith","id":4029847,"avatar_url":"https://avatars.githubusercontent.com/u/4029847?v=3","gravatar_id":"","url":"https://api.github.com/users/chrsmith","html_url":"https://github.com/chrsmith","followers_url":"https://api.github.com/users/chrsmith/followers","following_url":"https://api.github.com/users/chrsmith/following{/other_user}","gists_url":"https://api.github.com/users/chrsmith/gists{/gist_id}","starred_url":"https://api.github.com/users/chrsmith/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chrsmith/subscriptions","organizations_url":"https://api.github.com/users/chrsmith/orgs","repos_url":"https://api.github.com/users/chrsmith/repos","events_url":"https://api.github.com/users/chrsmith/events{/privacy}","received_events_url":"https://api.github.com/users/chrsmith/received_events","type":"User","site_admin":false},"milestone":null,"comments":1,"created_at":"2015-03-11T23:49:54Z","updated_at":"2015-03-11T23:49:56Z","closed_at":null,"body":"Original [issue 682](https://code.google.com/p/html5rocks/issues/detail?id=682) created by chrsmith on 2011-10-17T16:40:31.000Z:\n\n<b>Please describe the issue:</b>\n\r\nThe slides on slides.html5rocks.com are centered, but not vertically scrollable. This causes a letterboxing effect when viewing on devices with low vertical resolution (e.g. a phone in landscape mode) - the top and bottom of the slides are chopped off.\r\n\r\n<b>Please provide any additional information below.</b>\n\r\nIt is also possible to see this problem on desktop browser if one reduces the height of the window to &lt; 600px (screenshot attached)\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/chrsmith/html5rocks/issues/comments/78398038","html_url":"https://github.com/chrsmith/html5rocks/issues/665#issuecomment-78398038","issue_url":"https://api.github.com/repos/chrsmith/html5rocks/issues/665","id":78398038,"user":{"login":"chrsmith","id":4029847,"avatar_url":"https://avatars.githubusercontent.com/u/4029847?v=3","gravatar_id":"","url":"https://api.github.com/users/chrsmith","html_url":"https://github.com/chrsmith","followers_url":"https://api.github.com/users/chrsmith/followers","following_url":"https://api.github.com/users/chrsmith/following{/other_user}","gists_url":"https://api.github.com/users/chrsmith/gists{/gist_id}","starred_url":"https://api.github.com/users/chrsmith/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chrsmith/subscriptions","organizations_url":"https://api.github.com/users/chrsmith/orgs","repos_url":"https://api.github.com/users/chrsmith/repos","events_url":"https://api.github.com/users/chrsmith/events{/privacy}","received_events_url":"https://api.github.com/users/chrsmith/received_events","type":"User","site_admin":false},"created_at":"2015-03-11T23:49:56Z","updated_at":"2015-03-11T23:49:56Z","body":"Comment [#1](https://code.google.com/p/html5rocks/issues/detail?id=682#c1) originally posted by chrsmith on 2011-10-17T17:22:00.000Z:\n\nThis happens because slide divs have the following combination of CSS rules applied:\r\n\r\nposition: absolute;\r\nleft: 50%;\r\ntop: 50%;\r\noverflow: hidden;\r\nwidth: 900px;\r\nheight: 700px;\r\nmargin-left: -450px;\r\nmargin-top: -350px;\r\n\r\nSuch CSS styles are an easy way to vertically and horizontally center elements, but a known side effect is that content gets cut off when the content is taller than the screen. There are other ways of centering elements that do not suffer from this flaw."}}