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

View File

@ -410,7 +410,7 @@ export default function Home() {
<div className="row align-items-center flex-row-reverse"> <div className="row align-items-center flex-row-reverse">
{/* RIGHT IMAGE / LEFT CONTENT */} {/* RIGHT IMAGE / LEFT CONTENT */}
<div className="col-lg-6 col-md-12 col-sm-12 image-column order-2 order-lg-1"> <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"> <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-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> <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> </div>
</section> </section>
<section className="funfact-section centred"> <section className="funfact-section centred mt-3">
<div className="auto-container"> <div className="auto-container">
<div className="inner-container"> <div className="inner-container">
<div className="row clearfix"> <div className="row clearfix">

View File

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

View File

@ -3264,7 +3264,7 @@
@media only screen and (max-width: 499px) { @media only screen and (max-width: 499px) {
.sec-title-1 h2 { .sec-title-1 h2 {
font-size: 26px; font-size: 26px !important;
line-height: 34px; line-height: 34px;
} }
} }
@ -3567,14 +3567,63 @@
font-weight: 700; 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 { .custom-table {
border: 1px solid #000; border: 1px solid #101A30;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
} }
.custom-table th, .custom-table th,
.custom-table td { .custom-table td {
border: 1px solid #000; border: 1px solid #101A30;
padding: 8px; padding: 8px;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
@ -3704,7 +3753,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.service-details-content h2 { .service-details-content h2 {
font-size: 38px !important; font-size: 30px !important;
} }
} }
@ -3783,4 +3832,19 @@
.pagination-wrapper .pagination li a:hover img { .pagination-wrapper .pagination li a:hover img {
filter: brightness(0) invert(1); 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"> <div class="text-box">
<h5 class="mb-2">Neurological Physiotherapy treatment will help:</h5> <h5 class="mb-2">Neurological Physiotherapy treatment will help:</h5>
<div class="content-one mb_30"> <div class="content-one mb_30">
<div style="display: flex; gap: 40px;"> <div style="display: flex;">
<!-- First Column --> <!-- First Column -->
<ul class="list-style-one mt-3" style="padding-left: 30px; list-style-type: disc; margin: 0;"> <ul class="list-style-one mt-3" style="padding-left: 30px; list-style-type: disc; margin: 0;">