diff --git a/app/frontend/styles/_data_box.scss b/app/frontend/styles/_data_box.scss index a18c96baf..c90df19a6 100644 --- a/app/frontend/styles/_data_box.scss +++ b/app/frontend/styles/_data_box.scss @@ -2,22 +2,32 @@ @include govuk-font($size: 19); font-weight: bold; white-space: nowrap; - width: 100%; } -@media (min-width: 72.5em) { - .app-data-box-group { + +@media (min-width: 48.0625em) { + .app-data-box-group-one-third { display: flex; justify-content: space-between; column-gap: govuk-spacing(4); + width: 100%; } } -@media (min-width: 72.5em) { +@media (min-width: 66.25em) { .app-data-box-one-third { width: 33.3333333%; float: left; } } -@media (min-width: 72.5em) { +@media (min-width: 54.0625em) { + .app-data-box-group-one-half { + display: flex; + justify-content: space-between; + column-gap: govuk-spacing(4); + width: 100%; + } +} + +@media (min-width: 54.0625em) { .app-data-box-one-half { width: 50%; float: left; diff --git a/app/views/home/_data_box.html.erb b/app/views/home/_data_box.html.erb index d2a26d1b4..38efb5195 100644 --- a/app/views/home/_data_box.html.erb +++ b/app/views/home/_data_box.html.erb @@ -1,5 +1,7 @@ -