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

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

Signed-off-by: sarbojitrana <[email protected]>

* fix: center align buttons and prevent horizontal scroll on mobile

Signed-off-by: sarbojitrana <[email protected]>

* fix: correct indentation in workflow file

Signed-off-by: sarbojitrana <[email protected]>

* fix: align social icons vertically, fix text overlap, and restore image vibrancy

Signed-off-by: sarbojitrana <[email protected]>

* fix: finalize mobile layout alignment, visibility, and spacing per review

Signed-off-by: sarbojitrana <[email protected]>

* fix: fix the buttons in the hero sections for smaller devices

* fix: fix the buttons and scroll down link

---------

Signed-off-by: sarbojitrana <[email protected]>

Author: sarbojitrana

.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,209 @@ html.no-csstransitions .home-content__main {
 .criteria-list {
     /* margin-top: 20px; */
     margin-bottom: 40px;
+}
+
+/* --- UPDATED MOBILE FIXES (ISSUE: 3294) --- */
+@media only screen and (max-width: 900px) {
+
+    html, body {
+        overflow-x: hidden !important;
+        width: 100% !important;
+        position: relative;
+    }
+
+    .row {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+
+    #home, .home {
+        height: auto !important;
+        min-height: 100vh; 
+        padding-top: 10rem !important; 
+        padding-bottom: 5rem !important;
+        overflow: visible !important;
+    }
+
+    #about, .s-about {
+        margin-top: 20rem !important; 
+        position: relative !important;
+        z-index: 20 !important; 
+    }
+
+    .header-menu-text {
+        display: none !important;
+    }
+
+    .home-content {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important; 
+        text-align: center !important;
+        
+        width: 100% !important;
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+        
+        margin: 1rem auto !important; 
+        padding: 2rem !important;
+        
+        background: rgba(255, 255, 255, 0.85); 
+        border-radius: 15px;
+    }
+    
+    .home-content__main {
+        width: 100% !important;
+        text-align: center !important;
+        margin: 0 !important; 
+    }
+    
+    .home-content h1 {
+        font-size: clamp(2rem, 8vw, 3.5rem);
+        line-height: 1.2;
+        margin-bottom: 1rem;
+        text-decoration: none !important; 
+        border-bottom: none !important;
+        width: 100% !important;
+    }
+    
+    .home-content h1 span, 
+    .home-content h1 u, 
+    .home-content__main u {
+        text-decoration: none !important;
+        border-bottom: none !important;
+    }
+
+    .home-social, .overlay, .shadow-overlay {
+        display: none !important; 
+    }
+
+    .service-item {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: flex-start !important;
+        
+        height: auto !important;
+        min-height: auto !important;
+        margin-bottom: 3rem !important;
+        width: 100% !important;
+    }
+
+    .service-icon {
+        display: block !important;
+        position: static !important; 
+        margin-bottom: 1.5rem !important;
+        height: auto !important;
+        max-width: 100% !important;
+    }
+    
+    .service-text {
+        display: block !important;
+        position: static !important;
+        width: 100% !important;
+        margin-top: 0 !important;
+    }
+
+    .services-list, .card {
+        height: auto !important;
+        overflow: visible !important;
+    }
+
+    .listed-criteria h2, .criteria-list h2 {
+        line-height: 1.4 !important;
+        height: auto !important;
+        display: block !important;
+        margin-bottom: 0.5rem !important;
+    }
+
+    .bunny img {
+        opacity: 1.0 !important; 
+    }
+
+    footer, .footer, .s-footer {
+        text-align: center !important;
+    }
+    
+    footer ul, .footer ul, .footer-social {
+        justify-content: center !important;
+        display: flex !important;
+        width: 100% !important;
+        padding-left: 0 !important;
+        margin-left: 0 !important;
+    }
+    
+    footer form, .footer form {
+        display: flex !important;
+        flex-direction: column;
+        align-items: center !important;
+        width: 100%;
+    }
+
+    .footer-copyright, .copyright {
+        text-align: center !important;
+        width: 100%;
+    }
+
+    .process-div h3 {
+        margin-right: 1.5rem !important; 
+        padding-right: 0.5rem !important;
+    }
+
+    .contact-secondary, .contact-info, .cinfo {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important; 
+        text-align: center !important;
+        width: 100% !important;
+    }
+
+    .contact-social {
+        display: flex !important;
+        justify-content: center !important; 
+        width: 100% !important;
+        padding: 0 !important;
+        margin-top: 1.5rem !important;
+        gap: 1rem !important;
+    }
+
+    .home-content__buttons {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important; 
+        justify-content: center !important;
+        width: 100% !important;
+        gap: 1rem !important;
+        margin-top: 1.5rem !important;
+    }
+
+    .btn, .button {
+        display: inline-flex !important; 
+        justify-content: center !important;
+        align-items: center !important;
+        text-align: center !important;  
+        padding: 12px 24px !important;
+        height: auto !important;
+        min-height: 44px !important;    
+        white-space: normal !important;  
+        max-width: 90% !important;       
+        box-sizing: border-box !important;
+        margin: 0 auto !important;        
+    }
+
+    .home-content__scroll {
+        display: block !important;
+        width: 100% !important;
+        text-align: center !important;
+        position: static !important; 
+        transform: none !important;
+        
+        margin-top: 2rem !important; 
+        margin-bottom: 1rem !important;
+    }
+    li, p { word-wrap: break-word; }
 }