Improve amiibo mobile grid layout

This commit is contained in:
2026-05-19 12:17:30 +09:00
parent 307ce212c2
commit 38c49fc6e0

View File

@@ -176,6 +176,7 @@
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 14px; gap: 14px;
width: 100%;
max-width: 970px; max-width: 970px;
} }
@@ -209,12 +210,14 @@
margin: 0; margin: 0;
font-size: 1rem; font-size: 1rem;
line-height: 1.35; line-height: 1.35;
overflow-wrap: anywhere;
} }
.series { .series {
color: #64748b; color: #64748b;
font-size: 0.82rem; font-size: 0.82rem;
line-height: 1.35; line-height: 1.35;
overflow-wrap: anywhere;
} }
.price-row { .price-row {
@@ -261,6 +264,7 @@
color: #475569; color: #475569;
font-size: 0.84rem; font-size: 0.84rem;
line-height: 1.45; line-height: 1.45;
overflow-wrap: anywhere;
} }
.meta strong { .meta strong {
@@ -293,6 +297,10 @@
.filters { .filters {
position: static; position: static;
} }
.grid {
max-width: none;
}
} }
@media (max-width: 520px) { @media (max-width: 520px) {
@@ -300,13 +308,28 @@
padding-inline: 12px; padding-inline: 12px;
} }
.result-head {
align-items: flex-start;
flex-direction: column;
}
.grid {
grid-template-columns: minmax(0, 1fr);
}
.card { .card {
grid-template-columns: 72px minmax(0, 1fr); grid-template-columns: 68px minmax(0, 1fr);
gap: 10px;
padding: 10px;
} }
.card img { .card img {
width: 72px; width: 68px;
height: 104px; height: 96px;
}
.price {
font-size: 1.1rem;
} }
} }
</style> </style>