KeshavAnandCode/tscb-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve image display and layout across the about page for all devices

Browse Source 
Update the 'about us' page styling to fix image overlay issues, adjust image sizes, and implement responsive layouts for improved appearance on all devices. Add lazy loading to images.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1cf11e65-6deb-45c8-b84b-15ffb586a42f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 52941381-a76f-408f-bea0-146e6f493c34
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/ef74882e-373e-40b4-93c7-cf128544a855/1cf11e65-6deb-45c8-b84b-15ffb586a42f/jjGOhXu
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavananddev
2026-03-17 21:53:16 +00:00
parent 43112c4584
commit f7df852a00
4 changed files with 285 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
css/bundle.css
View File

@@ -10203,8 +10203,7 @@ header.main-header .header-sticky.active {
box-shadow: 0 10px 30px rgba(217, 40, 0, 0.35);
}
/* About image layout is intentionally handled by custom.css only.
The overlay (position:absolute) must be preserved at all screen sizes. */
/* About image layout overrides are handled below in the FOUNDERS SECTION block. */
/* ---- Counter section enhanced ---- */
.our-counter {
@@ -10828,3 +10827,144 @@ body {
}
}
/* ============================================================
CRICKET IMAGE (first about section) — Fix portrait ratio
The 3/4 ratio on desktop made it excessively tall.
Use a landscape ratio that fits the column nicely.
============================================================ */
@media (min-width: 1200px) {
.page-about-us .about-img-1 img {
aspect-ratio: 4 / 3 !important;
}
}
.page-about-us .about-img-1 img {
max-height: 480px !important;
object-position: center 20% !important;
}
/* ============================================================
FOUNDERS SECTION — Responsive staggered side-by-side layout
Completely replaces the position:absolute overlay from
custom.css which broke on every device below desktop.
============================================================ */
/* Remove the padding-top reserved for the overlay */
.pastors-message .about-image {
padding-top: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 14px !important;
}
/* Left image: taller, primary founder */
.pastors-message .about-img-1 {
position: static !important;
width: 60% !important;
flex-shrink: 0 !important;
}
/* Right image: staggered down slightly for visual depth */
.pastors-message .about-img-2 {
position: static !important;
top: auto !important;
right: auto !important;
width: 40% !important;
flex-shrink: 0 !important;
margin-top: 40px !important;
}
.pastors-message .about-img-1 figure,
.pastors-message .about-img-2 figure {
display: block !important;
border-radius: 16px !important;
overflow: hidden !important;
}
.pastors-message .about-img-1 img {
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 4 !important;
object-fit: cover !important;
object-position: top center !important;
border-radius: 16px !important;
border: none !important;
}
.pastors-message .about-img-2 img {
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 4 !important;
object-fit: cover !important;
object-position: top center !important;
border-radius: 16px !important;
border: 5px solid white !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important;
}
/* ---- Founders: tablet (≤ 991px) ---- */
@media (max-width: 991px) {
.pastors-message .about-image {
max-width: 560px !important;
margin: 0 auto 35px !important;
gap: 10px !important;
}
.pastors-message .about-img-1 {
width: 57% !important;
}
.pastors-message .about-img-2 {
width: 43% !important;
margin-top: 28px !important;
}
.pastors-message .about-img-2 img {
border-width: 4px !important;
}
}
/* ---- Founders: mobile (≤ 767px) ---- */
@media (max-width: 767px) {
.pastors-message .about-image {
max-width: 480px !important;
gap: 8px !important;
}
.pastors-message .about-img-2 {
margin-top: 20px !important;
}
.pastors-message .about-img-2 img {
border-width: 3px !important;
}
}
/* ---- Founders: small mobile (≤ 575px) — stack vertically ---- */
@media (max-width: 575px) {
.pastors-message .about-image {
flex-direction: column !important;
max-width: 100% !important;
gap: 10px !important;
margin: 0 0 30px !important;
}
.pastors-message .about-img-1,
.pastors-message .about-img-2 {
width: 100% !important;
margin-top: 0 !important;
}
.pastors-message .about-img-1 img,
.pastors-message .about-img-2 img {
aspect-ratio: 4 / 3 !important;
max-height: 280px !important;
border-radius: 12px !important;
}
.pastors-message .about-img-2 img {
border-width: 3px !important;
}
}

144
css/enhance.css
View File

@@ -172,8 +172,7 @@ header.main-header .header-sticky.active {
box-shadow: 0 10px 30px rgba(217, 40, 0, 0.35);
}
/* About image layout is intentionally handled by custom.css only.
The overlay (position:absolute) must be preserved at all screen sizes. */
/* About image layout overrides are handled below in the FOUNDERS SECTION block. */
/* ---- Counter section enhanced ---- */
.our-counter {
@@ -796,3 +795,144 @@ body {
margin-bottom: 24px !important;
}
}
/* ============================================================
CRICKET IMAGE (first about section) — Fix portrait ratio
The 3/4 ratio on desktop made it excessively tall.
Use a landscape ratio that fits the column nicely.
============================================================ */
@media (min-width: 1200px) {
.page-about-us .about-img-1 img {
aspect-ratio: 4 / 3 !important;
}
}
.page-about-us .about-img-1 img {
max-height: 480px !important;
object-position: center 20% !important;
}
/* ============================================================
FOUNDERS SECTION — Responsive staggered side-by-side layout
Completely replaces the position:absolute overlay from
custom.css which broke on every device below desktop.
============================================================ */
/* Remove the padding-top reserved for the overlay */
.pastors-message .about-image {
padding-top: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 14px !important;
}
/* Left image: taller, primary founder */
.pastors-message .about-img-1 {
position: static !important;
width: 60% !important;
flex-shrink: 0 !important;
}
/* Right image: staggered down slightly for visual depth */
.pastors-message .about-img-2 {
position: static !important;
top: auto !important;
right: auto !important;
width: 40% !important;
flex-shrink: 0 !important;
margin-top: 40px !important;
}
.pastors-message .about-img-1 figure,
.pastors-message .about-img-2 figure {
display: block !important;
border-radius: 16px !important;
overflow: hidden !important;
}
.pastors-message .about-img-1 img {
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 4 !important;
object-fit: cover !important;
object-position: top center !important;
border-radius: 16px !important;
border: none !important;
}
.pastors-message .about-img-2 img {
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 4 !important;
object-fit: cover !important;
object-position: top center !important;
border-radius: 16px !important;
border: 5px solid white !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important;
}
/* ---- Founders: tablet (≤ 991px) ---- */
@media (max-width: 991px) {
.pastors-message .about-image {
max-width: 560px !important;
margin: 0 auto 35px !important;
gap: 10px !important;
}
.pastors-message .about-img-1 {
width: 57% !important;
}
.pastors-message .about-img-2 {
width: 43% !important;
margin-top: 28px !important;
}
.pastors-message .about-img-2 img {
border-width: 4px !important;
}
}
/* ---- Founders: mobile (≤ 767px) ---- */
@media (max-width: 767px) {
.pastors-message .about-image {
max-width: 480px !important;
gap: 8px !important;
}
.pastors-message .about-img-2 {
margin-top: 20px !important;
}
.pastors-message .about-img-2 img {
border-width: 3px !important;
}
}
/* ---- Founders: small mobile (≤ 575px) — stack vertically ---- */
@media (max-width: 575px) {
.pastors-message .about-image {
flex-direction: column !important;
max-width: 100% !important;
gap: 10px !important;
margin: 0 0 30px !important;
}
.pastors-message .about-img-1,
.pastors-message .about-img-2 {
width: 100% !important;
margin-top: 0 !important;
}
.pastors-message .about-img-1 img,
.pastors-message .about-img-2 img {
aspect-ratio: 4 / 3 !important;
max-height: 280px !important;
border-radius: 12px !important;
}
.pastors-message .about-img-2 img {
border-width: 3px !important;
}
}