From 5a5e57113b358c1924dd0897100a88c3806a47f9 Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Thu, 16 Oct 2025 18:47:10 +0530
Subject: [PATCH] Blog table responsive updated

---
 public/assets/css/style.css | 41 ++++++++++++++++++++++++++
 utils/Blog.utils.js         | 57 +++++++++++++++++++------------------
 2 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index a8c81f1..a901bd4 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -3567,6 +3567,47 @@
    font-weight: 700;
  }
 
+ .custom-table {
+      border: 1px solid #000;
+      border-collapse: collapse;
+      width: 100%;
+    }
+    .custom-table th,
+    .custom-table td {
+      border: 1px solid #000;
+      padding: 8px;
+      text-align: left;
+      vertical-align: middle;
+    }
+    .custom-table thead {
+      background-color: #f8f9fa;
+    }
+
+    /* ✅ Responsive stacking below 576px */
+    @media (max-width: 576px) {
+      .custom-table thead {
+        display: none;
+      }
+      .custom-table, 
+      .custom-table tbody, 
+      .custom-table tr, 
+      .custom-table td {
+        display: block;
+        width: 100%;
+      }
+      .custom-table td {
+        text-align: left;
+        padding: 8px;
+        position: relative;
+      }
+      .custom-table td::before {
+        content: attr(data-label);
+        font-weight: bold;
+        display: block;
+        margin-bottom: 4px;
+      }
+    }
+
  @media (max-width: 425px) {
    /* .sec-title-2 {
      display: flex;
diff --git a/utils/Blog.utils.js b/utils/Blog.utils.js
index 3f4dc24..f6ee5fb 100644
--- a/utils/Blog.utils.js
+++ b/utils/Blog.utils.js
@@ -921,33 +921,36 @@ const Blogs = [
 
 <h3>Typical Session Durations at Rapha Rehab</h3>
 <p>Although each case is unique, here’s a general guideline based on what clients commonly experience:</p>
-<table style="width:100%; border-collapse: collapse; border: 1px solid #000;">
-  <thead>
-    <tr>
-      <th style="border: 1px solid #000; padding: 8px; text-align: left;">Type of Visit</th>
-      <th style="border: 1px solid #000; padding: 8px; text-align: left;">Duration</th>
-      <th style="border: 1px solid #000; padding: 8px; text-align: left;">What It Usually Includes</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td style="border: 1px solid #000; padding: 8px;">Initial Assessment / First Visit</td>
-      <td style="border: 1px solid #000; padding: 8px;">60 minutes</td>
-      <td style="border: 1px solid #000; padding: 8px;">Hands-on techniques, treatment plan</td>
-    </tr>
-    <tr>
-      <td style="border: 1px solid #000; padding: 8px;">Follow-up (standard)</td>
-      <td style="border: 1px solid #000; padding: 8px;">30 to 45 minutes</td>
-      <td style="border: 1px solid #000; padding: 8px;">Thorough evaluation, discussion of history, initial hands-on therapy, guided exercises, adjustments</td>
-    </tr>
-    <tr>
-      <td style="border: 1px solid #000; padding: 8px;">Extended or more complex cases</td>
-      <td style="border: 1px solid #000; padding: 8px;">45 to 60+ minutes</td>
-      <td style="border: 1px solid #000; padding: 8px;">Treatment, combined modalities</td>
-    </tr>
-  </tbody>
-</table>
-
+<div class="container my-4">
+  <div class="table-responsive">
+    <table class="custom-table">
+      <thead>
+        <tr>
+          <th>Type of Visit</th>
+          <th>Duration</th>
+          <th>What It Usually Includes</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td data-label="Type of Visit">Initial Assessment / First Visit</td>
+          <td data-label="Duration">60 minutes</td>
+          <td data-label="What It Usually Includes">Hands-on techniques, treatment plan</td>
+        </tr>
+        <tr>
+          <td data-label="Type of Visit">Follow-up (standard)</td>
+          <td data-label="Duration">30 to 45 minutes</td>
+          <td data-label="What It Usually Includes">Thorough evaluation, discussion of history, initial hands-on therapy, guided exercises, adjustments</td>
+        </tr>
+        <tr>
+          <td data-label="Type of Visit">Extended or more complex cases</td>
+          <td data-label="Duration">45 to 60+ minutes</td>
+          <td data-label="What It Usually Includes">Treatment, combined modalities</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
 <p class="mt-3">So when you book “physiotherapy in Mississauga, Ontario” or “physio Mississauga,” you’ll want to check what “standard session” means at each clinic. At Rapha Rehab, their therapists typically allow enough time for quality care.</p>
 
 <h3>What Does a Physiotherapy Session Involve?</h3>