Fix mobile layout for property detail pages

- Gallery thumbnails: constrain container to 88vw on mobile to prevent overflow
- Property specs: show as compact two-column list in single card on mobile,
  keep boxed grid layout on desktop

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Hanson.xyz Dev
2025-12-01 01:27:00 -06:00
parent f6c750170b
commit d1185184bf
3 changed files with 44 additions and 12 deletions
File diff suppressed because one or more lines are too long
@@ -94,6 +94,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
@media (max-width: 1023px) {
max-width: 88vw;
margin: auto;
}
} }
.gallery-thumbnails-viewport { .gallery-thumbnails-viewport {
@@ -90,41 +90,68 @@
// Property Specs Grid // Property Specs Grid
.property-specs-section { .property-specs-section {
margin-bottom: 2rem; margin-bottom: 2rem;
@media (max-width: 1023px) {
background-color: var(--color-bg-card);
padding: 1.5rem;
border-radius: 0.5rem;
}
} }
.property-specs-grid { .property-specs-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 1rem; gap: 0.75rem 1.5rem;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@media (min-width: 640px) { @media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1rem;
} }
} }
.property-specs-grid .spec-item { .property-specs-grid .spec-item {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
gap: 0.25rem; justify-content: space-between;
padding: 1rem; align-items: center;
background-color: var(--color-bg-card); gap: 0.5rem;
border-radius: 0.25rem; padding: 0.5rem 0;
border-bottom: 1px solid var(--color-border);
@media (min-width: 1024px) {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0.25rem;
padding: 1rem;
background-color: var(--color-bg-card);
border-radius: 0.25rem;
border-bottom: none;
}
} }
.spec-label { .spec-label {
font-size: 0.75rem; font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted); color: var(--color-text-muted);
@media (min-width: 1024px) {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
} }
.spec-value { .spec-value {
font-size: 1.25rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: var(--color-text); color: var(--color-text);
@media (min-width: 1024px) {
font-size: 1.25rem;
}
} }
// Documents // Documents