tom/diana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix hero layout: image fills content height, no excess whitespace

Browse Source
This commit is contained in:
Tom Roth
2026-07-31 09:12:41 +02:00
parent 36854833dc
commit 4ecc7ed288
1 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/css/main.css
View File

@@ -596,7 +596,7 @@ a {
.hero__inner { .hero__inner {
display: grid; display: grid;
grid-template-columns: 55% 45%; grid-template-columns: 55% 45%;
align-items: center; align-items: stretch;
gap: var(--space-8); gap: var(--space-8);
flex-direction: unset; flex-direction: unset;
} }
@@ -608,6 +608,13 @@ a {
gap: var(--space-4); gap: var(--space-4);
} }
@media (min-width: 1024px) {
.hero__content {
padding-block: var(--space-8);
justify-content: center;
}
}
.hero__actions { .hero__actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -638,6 +645,8 @@ a {
/* Image container — stacks below content on mobile, right column on desktop */ /* Image container — stacks below content on mobile, right column on desktop */
.hero__image { .hero__image {
width: 100%; width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
} }
.hero__image img { .hero__image img {
@@ -646,11 +655,21 @@ a {
aspect-ratio: 3 / 4; aspect-ratio: 3 / 4;
object-fit: cover; object-fit: cover;
object-position: top; object-position: top;
display: block;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.hero__image {
border-radius: var(--radius-lg);
}
.hero__image img { .hero__image img {
aspect-ratio: 4 / 5; /* Let the image fill the full height of the content column.
aspect-ratio is removed so the image stretches to whatever
height the left (text) column naturally takes. */
height: 100%;
aspect-ratio: unset;
border-radius: 0;
} }
} }