center scroll text in landingpage
This commit is contained in:
+12
-4
@@ -48,6 +48,13 @@
|
||||
/* ── Base reset ──────────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
/* Prevent accidental horizontal overflow on mobile */
|
||||
html, body {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-top: 5rem;
|
||||
@@ -327,8 +334,7 @@ img, picture { display: block; max-width: 100%; height: auto; }
|
||||
.landing__scroll-nudge {
|
||||
position: absolute;
|
||||
bottom: 2.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
inset-inline: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -864,14 +870,15 @@ img, picture { display: block; max-width: 100%; height: auto; }
|
||||
margin: 20px auto 40px;
|
||||
}
|
||||
.hero-card, .hero-copy { order: unset; }
|
||||
.hero-copy { padding: 0 2px; }
|
||||
.hero-copy { padding: 0 6px; text-align: center; }
|
||||
.hero-copy h1 { font-size: clamp(30px,9vw,40px); }
|
||||
.search { flex-direction: column; gap: 10px; }
|
||||
.search button { width: 100%; }
|
||||
.section-header { align-items: center; text-align: center; }
|
||||
.tag-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
|
||||
.tag-row .tag { flex: 0 0 auto; }
|
||||
.hero-card img { max-height: 240px; object-fit: cover; object-position: center; }
|
||||
.section-header { flex-direction: column; align-items: flex-start; gap: 6px; }
|
||||
.section-header { flex-direction: column; align-items: center; gap: 6px; }
|
||||
.section-header p { font-size: 14px; }
|
||||
.grid, .grid--tight, .recipe__body { grid-template-columns: 1fr; }
|
||||
.recipe { margin: 0 auto 40px; }
|
||||
@@ -887,6 +894,7 @@ img, picture { display: block; max-width: 100%; height: auto; }
|
||||
.coming-strip__row { grid-auto-columns: 128px; }
|
||||
.coming-chip__image img { aspect-ratio: 1/1; }
|
||||
.hero-card img { max-height: 220px; }
|
||||
.hero-copy { text-align: center; }
|
||||
.card__body { padding: 14px; }
|
||||
.recipe__hero { grid-template-columns: 1fr; }
|
||||
.recipe__hero img { max-height: 260px; object-fit: cover; object-position: center; order: 1; }
|
||||
|
||||
Reference in New Issue
Block a user