JoeBot/HOALedgerIQ_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'Fix carousel height jumping by stacking slides with CSS grid' (#9) from bugfix/carousel-fixed-height into main
All checks were successful
Deploy to Production / deploy (push) Successful in 3s
Details

Browse Source 
Reviewed-on: #9
This commit is contained in:
JoeBot
2026-04-02 07:47:38 -04:00
parent 63ef2e59ca 6b6bfea220
commit b2dc28c0df
1 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
styles.css
View File

@@ -902,13 +902,19 @@ body {
.carousel-slides { .carousel-slides {
position: relative; position: relative;
width: 100%; width: 100%;
display: grid; /* stack all slides — prevents height jump on slide change */
} }
.carousel-slide { .carousel-slide {
display: none; grid-area: 1 / 1; /* all slides share the same grid cell */
display: flex;
flex-direction: column; flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
} }
.carousel-slide.active { .carousel-slide.active {
display: flex; opacity: 1;
pointer-events: auto;
} }
.carousel-slide img { .carousel-slide img {
width: 100%; width: 100%;
@@ -972,15 +978,6 @@ body {
border-radius: 4px; border-radius: 4px;
} }
/* Fade transition */
.carousel-slide {
opacity: 0;
transition: opacity 0.4s ease;
}
.carousel-slide.active {
opacity: 1;
}
/* ---- Request Quote pricing ---- */ /* ---- Request Quote pricing ---- */
.price-amount--quote { .price-amount--quote {
font-size: 32px; font-size: 32px;