claude/kochwas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(recipe): Header-Bild auf Mobile max 30vh
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s
Details

Browse Source 
Das 16:10-Cover-Bild konnte auf Smartphones im Hochformat locker 40-50%
des Viewports füllen und Aktionen wie Favorit/Wunschliste fast aus dem
ersten Screen drücken. Auf <820px jetzt max-height:30vh — object-fit:
cover sorgt dafür, dass das Bild schön im gekürzten Rahmen sitzt.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-18 12:45:31 +02:00
parent 9a5c626890
commit c79cf8657d
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/components/RecipeView.svelte
View File

@@ -178,6 +178,13 @@
object-fit: cover; object-fit: cover;
background: #eef3ef; background: #eef3ef;
} }
/* Mobile: verhindere, dass das Header-Bild einen unverhältnismäßig
großen Teil des Viewports füllt und alles Wichtige wegdrückt. */
@media (max-width: 820px) {
.cover {
max-height: 30vh;
}
}
.hdr-body { .hdr-body {
padding: 1rem 1rem 0.25rem; padding: 1rem 1rem 0.25rem;
} }