fix: Fix column layout stacking and stretching (#382)

DFE-Digital · Jan 22, 2024 · 4f1998a · 4f1998a
1 parent 24281e5
commit 4f1998a
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 5 deletions.
diff --git a/Childrens-Social-Care-CPD/Views/Shared/_ColumnLayout.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_ColumnLayout.cshtml
@@ -10,10 +10,10 @@
 
     @foreach (var group in Model.Items.Select((e, i) => new { ContentItem = e, Grouping = (i / Model.ColumnCount) }).GroupBy(e => e.Grouping))
     {
-        <div class="govuk-grid-row">
+        <div class="govuk-grid-row columns-layout">
             @foreach (var item in group)
             {
-                <div class="@gridClass govuk-!-margin-bottom-4" style="display: flex">
+                <div class="@gridClass govuk-!-margin-bottom-4  columns-layout-col">
                     @{ await Html.RenderContentfulPartialAsync(item.ContentItem); }
                 </div>
             }

diff --git a/Childrens-Social-Care-CPD/styles/scss/overrides/_site.scss b/Childrens-Social-Care-CPD/styles/scss/overrides/_site.scss
@@ -252,4 +252,13 @@
     background-color: #ffdd00;
     font-weight: bold;
     font-style: normal;
+}
+
+.columns-layout {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.columns-layout-col {
+    display: flex;
 }
diff --git a/Childrens-Social-Care-CPD/wwwroot/css/application.css b/Childrens-Social-Care-CPD/wwwroot/css/application.css
diff --git a/Childrens-Social-Care-CPD/wwwroot/css/application.css.map b/Childrens-Social-Care-CPD/wwwroot/css/application.css.map
diff --git a/Childrens-Social-Care-CPD/wwwroot/css/application.min.css b/Childrens-Social-Care-CPD/wwwroot/css/application.min.css
diff --git a/Childrens-Social-Care-CPD/wwwroot/css/application.min.css.map b/Childrens-Social-Care-CPD/wwwroot/css/application.min.css.map