trending/context-mode
1
0
Fork 0
mirror of https://github.com/mksglu/context-mode.git synced 2026-10-10 16:18:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(landing): unbreak trust strip alignment (vertical stack)

Browse Source 
Owner reported (2026-06-06) the trust strip rendered with 20
company names stacked in a tall right-side column instead of a
horizontal wrap-row.

Root cause: .trust-grid used display:grid with grid-template-columns:
auto 1fr. The first column (auto) sized to its content — the
trust-headline block contains a long sentence + <br> + lead sentence,
so 'auto' computed to ~75% of viewport width. The second column
(1fr) got only the leftover narrow strip, forcing 20 brand spans
to wrap one-per-line vertically. The 900px media-query breakpoint
hid the bug on small screens but not desktop.

Fix (surgical, no redesign):
- .trust-grid: display:grid;grid-template-columns:auto 1fr;gap:48px
  -> display:flex;flex-direction:column;gap:20px
- .trust-headline: add max-width:880px so headline doesn't span
  the full container on ultrawide
- .trust-brands: add align-items:center for vertical rhythm with
  the row above (flex-wrap:wrap was already correct)
- Replace 900px breakpoint with a 600px breakpoint that just
  tightens brand gap/font — desktop is now correct, mobile too

Result: headline renders on top (max-width 880px), brands wrap
underneath as a horizontal row that flows naturally across 1-5
visual rows depending on viewport width.
This commit is contained in:
Mert Koseoglu
2026-06-06 20:08:21 +03:00
parent 21c373e8a2
commit bde1e0a2b0
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+4 -4
View File
@@ -136,13 +136,13 @@ pre code{overflow-wrap:normal;word-break:normal;white-space:pre}
/* ── Trust strip ── */
.trust{padding:32px 0;background:var(--bg-alt);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.trust-grid{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.trust-headline{font-family:var(--sans);font-size:1.25rem;font-weight:600;color:var(--text);line-height:1.4;letter-spacing:-.01em}
.trust-grid{display:flex;flex-direction:column;gap:20px}
.trust-headline{font-family:var(--sans);font-size:1.25rem;font-weight:600;color:var(--text);line-height:1.4;letter-spacing:-.01em;max-width:880px}
.trust-headline strong{font-style:normal;font-family:var(--mono);font-size:1.05rem;color:var(--accent-dark);font-weight:600;background:var(--accent-light);padding:2px 8px;border-radius:4px;margin-right:6px}
.trust-brands{display:flex;flex-wrap:wrap;gap:8px 22px}
.trust-brands{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.trust-brands span{font-size:14px;font-weight:600;color:var(--text-3);transition:color .2s;cursor:default}
.trust-brands span:hover{color:var(--text)}
@media(max-width:900px){.trust-grid{grid-template-columns:1fr;gap:20px}}
@media(max-width:600px){.trust-brands{gap:6px 16px}.trust-brands span{font-size:13px}}
/* ── Problem cards (3-up) ── */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}