Single property: Revert to original layout, remove sticky from sidebar

This commit is contained in:
Hanson.xyz Dev
2025-11-28 17:31:05 -06:00
parent dd006f51dc
commit be833efe62
4 changed files with 23 additions and 24 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -62,14 +62,10 @@ while (have_posts()) :
</div> </div>
</nav> </nav>
<!-- Fixed Sidebar -->
<aside class="single-property-sidebar">
<?php get_template_part('template-parts/property/property-agent', null, array('agent' => $listing_agent, 'property_id' => $property_id)); ?>
</aside>
<div class="container"> <div class="container">
<!-- Main Content (full width) --> <div class="single-property-layout">
<div class="single-property-content"> <!-- Main Content -->
<div class="single-property-content">
<!-- Gallery --> <!-- Gallery -->
<?php get_template_part('template-parts/property/property-gallery', null, array('gallery' => $gallery, 'property_id' => $property_id)); ?> <?php get_template_part('template-parts/property/property-gallery', null, array('gallery' => $gallery, 'property_id' => $property_id)); ?>
@@ -194,6 +190,12 @@ while (have_posts()) :
</ul> </ul>
</section> </section>
<?php endif; ?> <?php endif; ?>
</div>
<!-- Sidebar -->
<aside class="single-property-sidebar">
<?php get_template_part('template-parts/property/property-agent', null, array('agent' => $listing_agent, 'property_id' => $property_id)); ?>
</aside>
</div> </div>
</div> </div>
</main> </main>
@@ -51,8 +51,16 @@
padding-bottom: 4rem; padding-bottom: 4rem;
} }
.single-property-content { .single-property-layout {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
padding-top: 2rem; padding-top: 2rem;
@media (min-width: 1024px) {
grid-template-columns: 1fr 350px;
gap: 3rem;
}
} }
// Property Header // Property Header
@@ -200,21 +208,10 @@
} }
} }
// Fixed Sidebar // Sidebar (no sticky - stays in document flow)
.single-property-sidebar { .single-property-sidebar {
display: none;
@media (min-width: 1024px) { @media (min-width: 1024px) {
display: block; align-self: start;
position: fixed;
top: 120px;
right: 2rem;
width: 320px;
z-index: 100;
}
@media (min-width: 1280px) {
right: calc((100vw - 1200px) / 2);
} }
} }