From 7ca2e47d780f4ddb73ff7cc5d8925acc67a4d711 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Wed, 18 Sep 2024 09:36:16 -0500
Subject: [PATCH] Merge pull request #20429 from
 overleaf/jel-cms-bs5-vertical-spacing

[web] Always set top padding on columns on mobile for BS5 CMS pages

GitOrigin-RevId: 1532d960686ad324216a414e44a45ad5479ab564
---
 .../stylesheets/bootstrap-5/pages/cms.scss    | 66 +++----------------
 1 file changed, 9 insertions(+), 57 deletions(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
index 6693f3f479..4fa955af0b 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
@@ -78,6 +78,15 @@
     max-width: 1440px;
   }
 
+  // TODO: update if mobile breakpoint changes
+  @include media-breakpoint-down(md) {
+    div[class*='col-'] {
+      &:not(:first-child) {
+        padding-top: var(--spacing-13);
+      }
+    }
+  }
+
   padding-bottom: 0;
 
   img {
@@ -524,63 +533,6 @@
   margin-top: var(--spacing-11);
 }
 
-@include media-breakpoint-down(md) {
-  .mobile-bottom-margin-sm {
-    margin-bottom: var(--spacing-05);
-  }
-
-  .mobile-bottom-margin-md {
-    margin-bottom: var(--spacing-07);
-  }
-
-  .mobile-bottom-margin-lg {
-    margin-bottom: var(--spacing-09);
-  }
-
-  .mobile-bottom-margin-xl {
-    margin-bottom: var(--spacing-10);
-  }
-
-  .mobile-bottom-margin-xxl {
-    margin-bottom: var(--spacing-11);
-  }
-}
-
-// TODO: static newly designed pages used 992px for breakpoint
-// need to confirm whether or not CMS should as well
-// CMS currently uses 767px for breakpoint
-@include media-breakpoint-down(sm) {
-  .col-xs-padding-sm {
-    .col-xs-12:not(:first-child) {
-      padding-top: var(--spacing-05);
-    }
-  }
-
-  .col-xs-padding-md {
-    .col-xs-12:not(:first-child) {
-      padding-top: var(--spacing-07);
-    }
-  }
-
-  .col-xs-padding-lg {
-    .col-xs-12:not(:first-child) {
-      padding-top: var(--spacing-09);
-    }
-  }
-
-  .col-xs-padding-xl {
-    .col-xs-12:not(:first-child) {
-      padding-top: var(--spacing-10);
-    }
-  }
-
-  .col-xs-padding-xxl {
-    .col-xs-12:not(:first-child) {
-      padding-top: var(--spacing-11);
-    }
-  }
-}
-
 .bottom-align-last-entry {
   display: flex;
   flex-direction: column;