Six photo cards in 2 columns (3 rows) at desktop widths; phones collapse to a single full-width column and still show only the first four. Drops the 900px two-column step (now the base) and the cramped-card type overrides that only existed for the 2-up phone grid.
This commit is contained in:
1 parent
7f2680ea92
commit
84b412470b
3 files changed
+5
-17
No files matched your search
+3
-15
@@ -426,7 +426,7 @@ pre code {
|
||||
.related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
|
||||
.related-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@@ -521,12 +521,6 @@ pre code {
|
||||
margin: 1rem 0 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
/* Three photo cards per row stops working below ~900px — the OG art is
|
||||
1200x630 with baked-in type, so it needs width to stay readable. */
|
||||
.related-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.featured-bento-grid {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -915,15 +909,9 @@ a.category-card:hover { border-color: var(--brand); }
|
||||
.nav { padding: 0.8rem 1.25rem; gap: 0.85rem; }
|
||||
h1 { font-size: 1.7rem; }
|
||||
h2 { font-size: 1.25rem; }
|
||||
/* Related grid: four photo cards on phones (the last two are hidden), and
|
||||
keep the type small enough that a 160px-wide card still reads. */
|
||||
.related-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
|
||||
/* Related grid: one full-width card per row on phones, first four only. */
|
||||
.related-grid { grid-template-columns: 1fr; gap: 0.85rem; }
|
||||
.related-extra { display: none; }
|
||||
.related-card h3 { font-size: 0.82rem; }
|
||||
.related-card time { font-size: 0.7rem; }
|
||||
.related-read { display: none; } /* date alone fits a 160px card */
|
||||
.related-body { padding: 0.6rem 0.65rem; }
|
||||
.related-badge { font-size: 0.6rem; margin-bottom: 0.35rem; }
|
||||
.featured-bento-grid { grid-template-columns: 1fr; }
|
||||
.proof-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.stack-grid, .contact-split { grid-template-columns: 1fr; }
|
||||
|
||||
Reference in new issue
Block a user