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:
+1
-1
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
|
||||||
|
|||||||
Reference in New Issue
Block a user