fix(skills): collapse bento spans at 2-col breakpoint, not 720px
Landscape phone (720-1000px band) put the parent grid at 2 columns while the tile spans (hero span-2, full span-3) only reset at 720px. A span-3 tile in a 2-col grid forced a phantom 3rd column and collapsed the 1fr tracks to 58px 58px 760px, squishing the flagship card to ~132px off the visible area. Move the span reset to the same 1000px breakpoint the grid drops to 2 columns: now 446px 446px, hero full-width. Desktop 4-col + portrait 1-col unchanged.
This commit is contained in:
@@ -141,9 +141,11 @@ const spanClass =
|
|||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* bento collapses gracefully on narrow screens (grid goes 2-col then 1-col
|
/* Below 1000px the parent grid is only 2 columns — so the multi-column spans
|
||||||
in the parent; spans clamp automatically via grid auto-placement) */
|
must collapse to full-width HERE, not at 720px. A `span 3` tile left active
|
||||||
@media (max-width: 720px) {
|
in a 2-col grid forces a phantom 3rd column and collapses the 1fr tracks
|
||||||
|
(58px 58px 760px), squishing the first tile to ~130px in landscape phone. */
|
||||||
|
@media (max-width: 1000px) {
|
||||||
.tile--hero,
|
.tile--hero,
|
||||||
.tile--wide,
|
.tile--wide,
|
||||||
.tile--full {
|
.tile--full {
|
||||||
|
|||||||
Reference in New Issue
Block a user