designslife/dlStack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Portfolio: 78% width centered, extra vertical breathing

Browse Source 
Portfolio cards no longer span the full 12-column row on tablet+
sizes — they cap at 78% max-width and center themselves, so a
landscape image feels less like a wall and more like a plate inside
the layout. Stays full-bleed below 700px so it still feels right on
phones. Added margin-block to push neighbors away vertically.
This commit is contained in:
Joel Brock
2026-05-18 17:26:46 -07:00
parent aabd08371c
commit f9cb18bd74
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/styles.css
View File

@@ -279,8 +279,17 @@ main > .section:first-child { margin-top: var(--space-3xl); }
.grid > .card--featured{ grid-column: span 8; } .grid > .card--featured{ grid-column: span 8; }
} }
/* portfolio item — always full row */ /* portfolio item — full row on mobile, ~78% centered with breathing room above */
.grid > .card--portfolio { grid-column: span 12; } .grid > .card--portfolio {
grid-column: span 12;
margin-block: clamp(0.5rem, 1.5vw, 1.25rem);
}
@media (min-width: 700px) {
.grid > .card--portfolio {
max-width: 78%;
justify-self: center;
}
}
/* clients grid — auto-flowing square tiles */ /* clients grid — auto-flowing square tiles */
.grid--clients { .grid--clients {