Browse Source

feat: improve formatting

pull/2115/head
natdeanlewissoftwire 12 months ago
parent
commit
29c589dc4b
  1. 18
      app/frontend/styles/_data_box.scss
  2. 4
      app/views/home/index.html.erb

18
app/frontend/styles/_data_box.scss

@ -4,35 +4,47 @@
white-space: nowrap; white-space: nowrap;
} }
@media (min-width: 48.0625em) { @media (min-width: 54.0625em) {
.app-data-box-group-one-third { .app-data-box-group-one-third {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
column-gap: govuk-spacing(4); column-gap: govuk-spacing(4);
width: 100%; width: 100%;
min-width: 733.33px;
} }
} }
@media (min-width: 66.25em) { @media (min-width: 54.0625em) {
.app-data-box-one-third { .app-data-box-one-third {
width: 33.3333333%; width: 33.3333333%;
float: left; float: left;
} }
} }
@media (min-width: 54.0625em) {
.app-data-box__underline {
min-width: 733.33px;
}
}
@media (min-width: 54.0625em) { @media (min-width: 54.0625em) {
.app-data-box-group-one-half { .app-data-box-group-one-half {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
column-gap: govuk-spacing(4); column-gap: govuk-spacing(4);
width: 100%; width: 100%;
min-width: 733.33px;
} }
} }
@media (min-width: 54.0625em) { @media (min-width: 54.0625em) {
.app-data-box-one-half { .app-data-box-one-half {
width: 50%; width: 50%;
float: left; float: left;
} }
} }
@media (min-width: 54.0625em) {
.app-data-box-one-half__underline {
min-width: 733.33px;
}
}
.app-data-box__upper { .app-data-box__upper {
@include govuk-responsive-margin(2, "bottom"); @include govuk-responsive-margin(2, "bottom");
@include govuk-responsive-padding(4); @include govuk-responsive-padding(4);

4
app/views/home/index.html.erb

@ -42,7 +42,9 @@
</div> </div>
</div> </div>
<div class="govuk-grid-row"> <div class="govuk-grid-row">
<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m"> <div class="app-data-box__underline">
<hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
</div>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save