{"action":"created","issue":{"url":"https://api.github.com/repos/alphagov/govuk_frontend_toolkit/issues/266","repository_url":"https://api.github.com/repos/alphagov/govuk_frontend_toolkit","labels_url":"https://api.github.com/repos/alphagov/govuk_frontend_toolkit/issues/266/labels{/name}","comments_url":"https://api.github.com/repos/alphagov/govuk_frontend_toolkit/issues/266/comments","events_url":"https://api.github.com/repos/alphagov/govuk_frontend_toolkit/issues/266/events","html_url":"https://github.com/alphagov/govuk_frontend_toolkit/pull/266","id":139919241,"number":266,"title":"Improve phase banner alignment","user":{"login":"gemmaleigh","id":417754,"avatar_url":"https://avatars.githubusercontent.com/u/417754?v=3","gravatar_id":"","url":"https://api.github.com/users/gemmaleigh","html_url":"https://github.com/gemmaleigh","followers_url":"https://api.github.com/users/gemmaleigh/followers","following_url":"https://api.github.com/users/gemmaleigh/following{/other_user}","gists_url":"https://api.github.com/users/gemmaleigh/gists{/gist_id}","starred_url":"https://api.github.com/users/gemmaleigh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gemmaleigh/subscriptions","organizations_url":"https://api.github.com/users/gemmaleigh/orgs","repos_url":"https://api.github.com/users/gemmaleigh/repos","events_url":"https://api.github.com/users/gemmaleigh/events{/privacy}","received_events_url":"https://api.github.com/users/gemmaleigh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-03-10T15:19:00Z","updated_at":"2016-03-15T13:47:58Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/alphagov/govuk_frontend_toolkit/pulls/266","html_url":"https://github.com/alphagov/govuk_frontend_toolkit/pull/266","diff_url":"https://github.com/alphagov/govuk_frontend_toolkit/pull/266.diff","patch_url":"https://github.com/alphagov/govuk_frontend_toolkit/pull/266.patch"},"body":"At smaller screen sizes, the phase banner text wraps underneath the phase tag.\r\n\r\nScreenshot before:\r\n\r\n![gov uk elements - phase banner](https://cloud.githubusercontent.com/assets/417754/13673479/148f6278-e6d1-11e5-874f-1f09a9770e67.png)\r\n\r\nThis PR fixes this, by setting the parent paragraph to `display:table` and the line of text next to the phase tag to `display:table-cell`.\r\n\r\nAn alternative would be to use flexbox (as suggested by @alextea):\r\n\r\n```\r\n  p {\r\n    display: flex;\r\n    align-items: baseline;\r\n  }\r\n```\r\nIE10 requires a prefix, uses a different syntax and doesn't work as well.\r\n\r\nWithout modifying the GOV.UK template, there isn't a way to target versions of IE greater than 8, or a way to test for a browsers' features.\r\n\r\nScreenshots after:\r\n\r\niPhone 6\r\n\r\n![realios_iphone_6](https://cloud.githubusercontent.com/assets/417754/13673899/159a80b0-e6d3-11e5-8a43-0d5e8958d239.jpg)\r\n\r\nWindows 10, IE11\r\n\r\n![win10_ie_11 0](https://cloud.githubusercontent.com/assets/417754/13673884/06d566f8-e6d3-11e5-9887-b67963860f38.jpg)\r\n\r\nWindows 7, IE8\r\n\r\n![win7_ie_8 0](https://cloud.githubusercontent.com/assets/417754/13673877/f937e94e-e6d2-11e5-8c2a-379ddae06f74.jpg)\r\n\r\n\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/alphagov/govuk_frontend_toolkit/issues/comments/196825202","html_url":"https://github.com/alphagov/govuk_frontend_toolkit/pull/266#issuecomment-196825202","issue_url":"https://api.github.com/repos/alphagov/govuk_frontend_toolkit/issues/266","id":196825202,"user":{"login":"robinwhittleton","id":7414,"avatar_url":"https://avatars.githubusercontent.com/u/7414?v=3","gravatar_id":"","url":"https://api.github.com/users/robinwhittleton","html_url":"https://github.com/robinwhittleton","followers_url":"https://api.github.com/users/robinwhittleton/followers","following_url":"https://api.github.com/users/robinwhittleton/following{/other_user}","gists_url":"https://api.github.com/users/robinwhittleton/gists{/gist_id}","starred_url":"https://api.github.com/users/robinwhittleton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robinwhittleton/subscriptions","organizations_url":"https://api.github.com/users/robinwhittleton/orgs","repos_url":"https://api.github.com/users/robinwhittleton/repos","events_url":"https://api.github.com/users/robinwhittleton/events{/privacy}","received_events_url":"https://api.github.com/users/robinwhittleton/received_events","type":"User","site_admin":false},"created_at":"2016-03-15T13:47:58Z","updated_at":"2016-03-15T13:47:58Z","body":"I suspect this won’t work in IE7, but then again it’s not going to look any worse that in does currently and it’s not on our testing schedule any more so 👍"}}