brianhansonxyz/homeproz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile layout for property detail pages

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
wp-content/themes/homeproz/dist/assets/main.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-content/themes/homeproz/template-parts/property/property-gallery.scss
+5
View File
@@ -94,6 +94,11 @@
display: flex;
align-items: center;
gap: 0.5rem;
@media (max-width: 1023px) {
max-width: 88vw;
margin: auto;
}
}
.gallery-thumbnails-viewport {
wp-content/themes/homeproz/template-parts/property/single-property.scss
+31 -4
View File
@@ -90,41 +90,68 @@
// Property Specs Grid
.property-specs-section {
margin-bottom: 2rem;
@media (max-width: 1023px) {
background-color: var(--color-bg-card);
padding: 1.5rem;
border-radius: 0.5rem;
}
}
.property-specs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
gap: 0.75rem 1.5rem;
list-style: none;
margin: 0;
padding: 0;
@media (min-width: 640px) {
@media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
}
.property-specs-grid .spec-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
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 {
font-size: 0.875rem;
color: var(--color-text-muted);
@media (min-width: 1024px) {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
}
.spec-value {
font-size: 1.25rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
@media (min-width: 1024px) {
font-size: 1.25rem;
}
}
// Documents