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

Center the homepage mission image on mobile devices

Browse Source 
Update CSS to ensure the mission image is centered and fully visible on mobile viewports by overriding GSAP animation styles.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d075e7a4-f667-4f28-b24a-2d29e4931850
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a4ff629e-a0c5-4ff8-9450-c5b4de6efab5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e2c5cd18-6007-4bb1-a111-e14cc125923d/d075e7a4-f667-4f28-b24a-2d29e4931850/W9XaVKV
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavanand12
2026-03-17 22:52:31 +00:00
parent 96e65d860f
commit 5aa440c4dc
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
css/enhance.css
View File

@@ -978,18 +978,27 @@ body {
margin-top: 30px !important;
}
/* Fix inline-flex reveal figure so it fills full width on mobile */
/* Fix reveal figure on mobile: bypass the GSAP slide-in (xPercent: -100
initial state) and just show the image centred and full-width. */
.mission-img .reveal,
.mission-img figure {
display: block !important;
width: 100% !important;
/* Override GSAP inline transform/visibility so image is always visible */
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
}
/* Landscape aspect-ratio on mobile; override height:100% from .reveal img */
.mission-img img {
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 auto !important;
aspect-ratio: 16 / 9 !important;
border-radius: 0 0 50px 0 !important;
transform: none !important;
}
/* CTA box: centre button at tablet */