{"action":"created","issue":{"url":"https://api.github.com/repos/guardian/frontend/issues/11945","repository_url":"https://api.github.com/repos/guardian/frontend","labels_url":"https://api.github.com/repos/guardian/frontend/issues/11945/labels{/name}","comments_url":"https://api.github.com/repos/guardian/frontend/issues/11945/comments","events_url":"https://api.github.com/repos/guardian/frontend/issues/11945/events","html_url":"https://github.com/guardian/frontend/pull/11945","id":133035773,"number":11945,"title":"Change Outbrain widget to be consistent with other containers in AMP","user":{"login":"JonNorman","id":1821099,"avatar_url":"https://avatars.githubusercontent.com/u/1821099?v=3","gravatar_id":"","url":"https://api.github.com/users/JonNorman","html_url":"https://github.com/JonNorman","followers_url":"https://api.github.com/users/JonNorman/followers","following_url":"https://api.github.com/users/JonNorman/following{/other_user}","gists_url":"https://api.github.com/users/JonNorman/gists{/gist_id}","starred_url":"https://api.github.com/users/JonNorman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JonNorman/subscriptions","organizations_url":"https://api.github.com/users/JonNorman/orgs","repos_url":"https://api.github.com/users/JonNorman/repos","events_url":"https://api.github.com/users/JonNorman/events{/privacy}","received_events_url":"https://api.github.com/users/JonNorman/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-02-11T17:29:44Z","updated_at":"2016-02-15T10:49:13Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/guardian/frontend/pulls/11945","html_url":"https://github.com/guardian/frontend/pull/11945","diff_url":"https://github.com/guardian/frontend/pull/11945.diff","patch_url":"https://github.com/guardian/frontend/pull/11945.patch"},"body":"#### Before\r\n![image](https://cloud.githubusercontent.com/assets/1821099/12982860/aba9a2f8-d0de-11e5-81e2-fb7ab14233ba.png)\r\n\r\n#### After\r\n![image](https://cloud.githubusercontent.com/assets/1821099/12983183/fcdd7fae-d0df-11e5-8c3b-ff73b77eaa80.png)\r\n\r\n#### Overflow element\r\nThe `overflow` element contains the *More stories* button that appears when the page is loaded prior to the amp container contents. In such cases the height of the `amp-iframe` is determined by the `height` property specified as an attribute of the `amp-iframe`.\r\n\r\nThe `height` property has been set so as to show a single card and then the button, however on narrower screens, the Outbrain header text wraps, causes the contents of the frame to become taller and results in the `overflow` covering part of the ad:\r\n\r\n**Nexus 7 - 600x960**:\r\n![image](https://cloud.githubusercontent.com/assets/1821099/12983241/4b396848-d0e0-11e5-810a-691cebbb96ce.png)\r\n\r\n**Nexus 6 - 412x659**:\r\n![image](https://cloud.githubusercontent.com/assets/1821099/12983275/84023e48-d0e0-11e5-94ac-39249f3e3c9b.png)\r\n\r\nAn initial height for the `amp-iframe` must be given and I don't know a way of determining the user agent when setting the height property of the `amp-iframe`. The `overflow` element must also be part of the `amp-iframe` element so it cannot be set to float below the Outbrain `iframe`.\r\n\r\n@NataliaLKB - if you have some time tomorrow, it'd be great to discuss **a)** whether this matters and (if so) **b)** a good approach to circumventing it."},"comment":{"url":"https://api.github.com/repos/guardian/frontend/issues/comments/184164103","html_url":"https://github.com/guardian/frontend/pull/11945#issuecomment-184164103","issue_url":"https://api.github.com/repos/guardian/frontend/issues/11945","id":184164103,"user":{"login":"uplne","id":2579465,"avatar_url":"https://avatars.githubusercontent.com/u/2579465?v=3","gravatar_id":"","url":"https://api.github.com/users/uplne","html_url":"https://github.com/uplne","followers_url":"https://api.github.com/users/uplne/followers","following_url":"https://api.github.com/users/uplne/following{/other_user}","gists_url":"https://api.github.com/users/uplne/gists{/gist_id}","starred_url":"https://api.github.com/users/uplne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/uplne/subscriptions","organizations_url":"https://api.github.com/users/uplne/orgs","repos_url":"https://api.github.com/users/uplne/repos","events_url":"https://api.github.com/users/uplne/events{/privacy}","received_events_url":"https://api.github.com/users/uplne/received_events","type":"User","site_admin":false},"created_at":"2016-02-15T10:49:13Z","updated_at":"2016-02-15T10:49:13Z","body":"Is this styling right? \r\n<img width=\"253\" alt=\"screen shot 2016-02-15 at 10 49 09\" src=\"https://cloud.githubusercontent.com/assets/2579465/13046624/bf47d2b2-d3d1-11e5-8697-499ebbcb1c08.png\">\r\n"}}