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

Compare commits

base: JoeBot:63ef2e59caa9cfb35d08908ab90e4531f570fb6b
Branches Tags
JoeBot:main JoeBot:feature-insights-2026-04-21 JoeBot:feature/deployment-files
...
compare: JoeBot:b2dc28c0df6cfc104be2070a42e559b65114a382
Branches Tags
JoeBot:main JoeBot:feature-insights-2026-04-21 JoeBot:feature/deployment-files

2 Commits
63ef2e59ca ... b2dc28c0df

Author SHA1 Message Date
JoeBot
b2dc28c0df 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 
Reviewed-on: #9
 2026-04-02 07:47:38 -04:00
olsch01
6b6bfea220 Fix carousel height jumping by stacking slides with CSS grid 
Replace display:none/flex slide toggling with CSS grid stacking so all
slides always occupy the same layout cell. The container height is now
fixed at the tallest image height — no more text jumping below the
carousel as slides change. Also enables the existing opacity fade
transition which was previously blocked by display:none.

Affects: index.html, articles/why-we-built-hoa-ledgeriq.html,
         articles/hoa-financial-blind-spots.html, and all future articles.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-04-02 07:45:49 -04:00
1 changed files with 8 additions and 11 deletions
Expand all files Collapse all files

19
styles.css
View File

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