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

style: add responsive CSS for team-member-item and images

Browse Source
This commit is contained in:
Krishna Ayyalasomayajula
2026-03-17 14:54:11 -05:00
parent 9c4232cbe0
commit be8278453b
1 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
css/custom.css
View File

@@ -2659,10 +2659,25 @@ header.main-header .header-sticky.active{
} }
.team-member-item{ .team-member-item{
position: relative; position: relative;
height: calc(100% - 30px); height: calc(100% - 30px);
margin-bottom: 30px; margin-bottom: 20px;
z-index: 1; padding: 15px;
z-index: 1;
}
/* Tablet breakpoint: increase padding for larger screens */
@media (min-width: 768px) {
.team-member-item {
padding: 20px;
}
}
/* Desktop breakpoint (1200px+): maximum padding for optimal spacing */
@media (min-width: 1200px) {
.team-member-item {
padding: 25px;
}
} }
.team-image{ .team-image{
@@ -2674,11 +2689,18 @@ header.main-header .header-sticky.active{
} }
.team-image img{ .team-image img{
width: 100%; width: 100%;
aspect-ratio: 1/1.22; aspect-ratio: 1/1.22; /* default desktop */
object-fit: cover; object-fit: cover;
border-radius: 0 0 80px 0; border-radius: 0 0 80px 0;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
/* Mobile breakpoint (575px and below): square aspect ratio for better fit */
@media (max-width: 575px) {
.team-image img {
aspect-ratio: 1/1; /* square on mobile for better fit */
}
} }
.team-member-item:hover .team-image img{ .team-member-item:hover .team-image img{