Responsive table updated on mobile view

This commit is contained in:
akash 2025-10-16 20:34:12 +05:30
parent 5a5e57113b
commit d748cd15f6
6 changed files with 97 additions and 38 deletions

View File

@ -202,7 +202,7 @@ export default function Home() {
<div className="row align-items-center flex-row-reverse">
{/* RIGHT IMAGE / LEFT CONTENT */}
<div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
<div className="image_block_two pl_30">
<div className="image_block_two pl_30 pb_30">
<div className="image-box">
<figure className="image image-1-new "><img src="/assets/images/about-us/section3/top.webp" className="new-image-about" alt="Physiotherapy at Rapharehab" /></figure>
<figure className="image image-2-new"><img src="/assets/images/about-us/section3/bottom.webp" alt="Physiotherapy at Rapharehab" /></figure>

View File

@ -43,7 +43,7 @@ export default function RefugeeIFHP() {
</div>
<div className="mb_30">
<p>
<p className="mb-3">
At Rapha Rehab, we make it easy for refugees and refugee
claimants to access physiotherapy using Canadas Interim
Federal Health Program (IFHP). We handle the paperwork, explain
@ -95,7 +95,7 @@ export default function RefugeeIFHP() {
schedule set out in the grid
</li>
</ul>
<p className="mt-3">
<p className="mt-3 mb-3">
We arrange any prior approval the grid requires before
treatment begins.
</p>
@ -412,7 +412,7 @@ export default function RefugeeIFHP() {
<div className="mb_30 mt-5">
<h3 className="mb-2">How Billing & Payments Work</h3>
<div className="table-responsive billing-table">
<table className="table table-bordered mt-3">
<table className="table table-bordered mt-3 billing-responsive-table">
<thead>
<tr>
<th>Step</th>
@ -422,50 +422,45 @@ export default function RefugeeIFHP() {
</thead>
<tbody>
<tr>
<td>1. Check Coverage</td>
<td>
Bring your insurance card or policy details. Well confirm
your coverage.
<td data-label="Step">1. Check Coverage</td>
<td data-label="For General Patients">
Bring your insurance card or policy details. Well confirm your coverage.
</td>
<td>
Bring your IFHP eligibility document (with UCI number) and a
doctors referral.
<td data-label="For Refugee Patients">
Bring your IFHP eligibility document (with UCI number) and a doctors referral.
</td>
</tr>
<tr>
<td>2. Verification</td>
<td>
We confirm benefits with your private insurer, WSIB, or auto
insurance.
<td data-label="Step">2. Verification</td>
<td data-label="For General Patients">
We confirm benefits with your private insurer, WSIB, or auto insurance.
</td>
<td>
We verify IFHP eligibility and confirm coverage with Medavie
Blue Cross.
<td data-label="For Refugee Patients">
We verify IFHP eligibility and confirm coverage with Medavie Blue Cross.
</td>
</tr>
<tr>
<td>3. Direct Billing</td>
<td>
<td data-label="Step">3. Direct Billing</td>
<td data-label="For General Patients">
We directly bill many insurers, WSIB, and auto insurers.
</td>
<td>
<td data-label="For Refugee Patients">
We bill Medavie Blue Cross directly for covered services.
</td>
</tr>
<tr>
<td>4. Out-of-Pocket Costs</td>
<td>
If your plan doesnt fully cover a service, well explain
the cost upfront.
<td data-label="Step">4. Out-of-Pocket Costs</td>
<td data-label="For General Patients">
If your plan doesnt fully cover a service, well explain the cost upfront.
</td>
<td>
If a service isnt covered, well let you know in advance so
there are no surprises.
<td data-label="For Refugee Patients">
If a service isnt covered, well let you know in advance so there are no surprises.
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="mb_30 mt-4">
@ -525,7 +520,7 @@ export default function RefugeeIFHP() {
Our team will review your insurance or IFHP eligibility and guide
you through every step of the process.
</p>
<div className="btn-box mt-4 mb-4">
<div className="btn-box mt-3 mb-4">
<Link href="/contact" className="theme-btn btn-one"><span>Contact Us to Check Your Coverage</span></Link>
</div>

View File

@ -410,7 +410,7 @@ export default function Home() {
<div className="row align-items-center flex-row-reverse">
{/* RIGHT IMAGE / LEFT CONTENT */}
<div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1">
<div className="image_block_two pl_30">
<div className="image_block_two pl_30 pb_30">
<div className="image-box raw-image">
<figure className="image image-1-ho raw "><img src="/assets/images/shortcodes/back.webp" alt="Why choose nanocare" /></figure>
<figure className="image image-2"><img src="/assets/images/shortcodes/front.webp" alt="Why choose nanocare" /></figure>
@ -541,7 +541,7 @@ export default function Home() {
</div>
</section>
<section className="funfact-section centred">
<section className="funfact-section centred mt-3">
<div className="auto-container">
<div className="inner-container">
<div className="row clearfix">

View File

@ -296,7 +296,7 @@
@media only screen and (max-width: 426px) and (min-width: 200px) {
.blog-details-content blockquote p{
font-size: 18px !important;
font-size: 14px !important;
line-height: 34px;
font-style: italic;
margin-bottom: 20px;
@ -305,7 +305,7 @@
.blog-details-content blockquote h4{
display: block;
font-size: 18px !important;
font-size: 14px !important;
line-height: 32px;
font-weight: 500;
margin-bottom: 5px;

View File

@ -3264,7 +3264,7 @@
@media only screen and (max-width: 499px) {
.sec-title-1 h2 {
font-size: 26px;
font-size: 26px !important;
line-height: 34px;
}
}
@ -3567,14 +3567,63 @@
font-weight: 700;
}
/* ✅ Table Base Styles */
.billing-responsive-table {
width: 100%;
border: 1px solid #101A30;
border-collapse: collapse;
}
.billing-responsive-table th,
.billing-responsive-table td {
border: 1px solid #101A30;
padding: 8px;
text-align: left;
vertical-align: middle;
}
.billing-responsive-table thead {
background-color: #f8f9fa;
}
/* ✅ Responsive Stack for Small Screens */
@media (max-width: 576px) {
.billing-responsive-table thead {
display: none;
}
.billing-responsive-table,
.billing-responsive-table tbody,
.billing-responsive-table tr,
.billing-responsive-table td {
display: block;
width: 100%;
}
.billing-responsive-table td {
position: relative;
padding: 8px;
text-align: left;
}
.billing-responsive-table td::before {
content: attr(data-label);
display: block;
font-weight: bold;
margin-bottom: 4px;
}
}
.custom-table {
border: 1px solid #000;
border: 1px solid #101A30;
border-collapse: collapse;
width: 100%;
}
.custom-table th,
.custom-table td {
border: 1px solid #000;
border: 1px solid #101A30;
padding: 8px;
text-align: left;
vertical-align: middle;
@ -3704,7 +3753,7 @@
@media (max-width: 768px) {
.service-details-content h2 {
font-size: 38px !important;
font-size: 30px !important;
}
}
@ -3783,4 +3832,19 @@
.pagination-wrapper .pagination li a:hover img {
filter: brightness(0) invert(1);
}
@media only screen and (max-width: 426px) and (min-width : 200px) {
.list-style-one li {
position: relative;
display: block;
font-size: 14px !important;
line-height: 26px !important;
color: #101A30;
font-weight: 500;
padding-left: 40px;
margin-bottom: 17px;
}
}

View File

@ -344,7 +344,7 @@ physiotherapy and rehabilitation to treat neurological conditions such as:</h5>
<div class="text-box">
<h5 class="mb-2">Neurological Physiotherapy treatment will help:</h5>
<div class="content-one mb_30">
<div style="display: flex; gap: 40px;">
<div style="display: flex;">
<!-- First Column -->
<ul class="list-style-one mt-3" style="padding-left: 30px; list-style-type: disc; margin: 0;">