Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Re-center Hero social proof below 640px, keep it left-aligned at Tablet

Browse Source 
Centering it site-wide below lg: overcorrected — true Mobile (<640px)
should stay centered (matches the CTA there), only the 640-1023px
Tablet band needed the left-align fix from the previous commit.
This commit is contained in:
Marco
2026-07-29 11:08:40 +00:00
parent 5e1d88d13e
commit dfb6eb5e23
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Hero.tsx
+8 -8
View File
@@ -123,13 +123,13 @@ export function Hero() {
{/* Social proof — always avatars-then-text on two lines below
lg: (not just when it happens to overflow), single row again
from lg: up where the real column width fits it fine.
Left-aligned below lg: (items-start/justify-start/text-left)
to match the heading/subheading/CTA above it — centered read
as floating/disconnected from the rest of the left-aligned
column (reported 2026-07-29). CTA itself stays separately
centered on true Mobile only (self-center, see above) — this
row was never part of that request. */}
<div className="flex flex-col lg:flex-row gap-3 items-start lg:items-center justify-start lg:justify-center overflow-clip shrink-0 w-full">
Centered on true Mobile (<640px, matches the CTA above it,
see self-center there); left-aligned in the 640-1023px
Tablet band instead, matching the left-aligned heading/
subheading — plain centered there read as floating/
disconnected from that column (reported 2026-07-29); back to
a centered row at lg:. */}
<div className="flex flex-col lg:flex-row gap-3 items-center sm:items-start lg:items-center justify-center sm:justify-start lg:justify-center overflow-clip shrink-0 w-full">
{/* Avatars — gap 2px, not overlapping */}
<div className="flex gap-[0.125rem] items-center shrink-0">
{["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (
@@ -142,7 +142,7 @@ export function Hero() {
</div>
))}
</div>
<p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body text-left [word-break:break-word]">
<p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body text-center sm:text-left [word-break:break-word]">
1.120+ Menschen vertrauen <span className="whitespace-nowrap">einfach-produktiv</span>
</p>
</div>