diff --git a/app/assets/stylesheets/components/cookie-message.scss b/app/assets/stylesheets/components/cookie-message.scss index c1a3a8863..0c9b9192b 100644 --- a/app/assets/stylesheets/components/cookie-message.scss +++ b/app/assets/stylesheets/components/cookie-message.scss @@ -31,36 +31,48 @@ } .notify-cookie-banner__buttons { - @include govuk-clearfix; + display: flex; + flex-wrap: wrap; @include govuk-media-query($from: tablet) { - display: inline-block; + flex-wrap: nowrap; } } +.notify-cookie-banner__button, +.notify-cookie-banner__link { + vertical-align: baseline; +} + .notify-cookie-banner__button { - float: left; - width: 50%; - box-sizing: border-box; + display: inline-block; + flex: 1 0; + padding-left: govuk-spacing(9); + padding-right: govuk-spacing(9); + margin-bottom: govuk-spacing(2); @include govuk-media-query($from: tablet) { - display: inline-block; - float: none; - width: auto; + flex: 0 0 150px; + padding-left: govuk-spacing(2); + padding-right: govuk-spacing(2); + margin-bottom: govuk-spacing(1); } } .notify-cookie-banner__button-accept { - padding-right: govuk-spacing(4); + margin-right: govuk-spacing(4); } .notify-cookie-banner__link { @include govuk-font(19); + line-height: 1; display: block; - clear: both; + width: 100%; + padding: 9px 0px 6px; @include govuk-media-query($from: tablet) { - display: inline-block; + display: inline; + width: auto; margin-left: govuk-spacing(6); } } diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss index f2dc7fa1f..0d4b693fa 100644 --- a/app/assets/stylesheets/govuk-frontend/extensions.scss +++ b/app/assets/stylesheets/govuk-frontend/extensions.scss @@ -8,12 +8,3 @@ } } -// Class to extend govuk-button to allow it to sit alongside other inline content -.govuk-button__inline { - vertical-align: top; - margin-bottom: 0; - - @include govuk-media-query($from: tablet) { - vertical-align: baseline; - } -} diff --git a/app/templates/components/cookie-banner.html b/app/templates/components/cookie-banner.html index 970b6ebcf..2c1369745 100644 --- a/app/templates/components/cookie-banner.html +++ b/app/templates/components/cookie-banner.html @@ -5,16 +5,12 @@

Analytics cookies help us understand how our website is being used.