fix: mobile layout collision in header and services list (fixes #3294)

.github/workflows/build_and_check.yml

@@ -2,19 +2,20 @@ name: Preview
 
 on:
   pull_request:
-      types:
-        - opened
-        - reopened
-        - synchronize
-        - closed
-  jobs:
-    deploy-preview:
-      runs-on: ubuntu-latest
-      steps:
-        - uses: actions/checkout@v3
-        - uses: rossjrw/pr-preview-action@v1
-          with:
-            source-dir: .
-            preview-branch: gh-pages
-            umbrella-dir: pr-preview
-            action: auto
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: .
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: auto

css/main.css

@@ -2502,6 +2502,16 @@ html.no-csstransitions .home-content__main {
         float: none;
         margin-top: 0;
     }
+    .services-list .service-text {
+        /* 1. Force reset the negative pull */
+        margin-top: 1rem !important; 
+
+        /* 2. Reset left margin so it centers perfectly */
+        margin-left: 0 !important; 
+
+        /* 3. Ensure text doesn't get squashed */
+        width: 100%;
+    }
 }
 
 @media only screen and (max-width: 600px) {
@@ -4043,4 +4053,43 @@ html.no-csstransitions .home-content__main {
 .criteria-list {
     /* margin-top: 20px; */
     margin-bottom: 40px;
+}
+
+/* ---FIX FOR ISSUE #3294--- */
+@media only screen and (max-width: 900px) {
+
+    .home-social {
+        position: relative; 
+        top: auto;
+        right: auto;
+        transform: none; 
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        margin-top: 3rem; 
+        padding: 0;
+    }
+
+    .home-social li {
+        padding: 0 1.5rem; 
+    }
+
+    .home-content {
+        padding-right: 0 !important;
+        text-align: center;
+    }
+
+    .home-content__buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        gap: 1rem;
+    }
+
+    .home-content h1 {
+        font-size: clamp(2rem, 5vw, 4rem); 
+    }
 }