Single property: Fixed contact sidebar, full-width content area

This commit is contained in:
Hanson.xyz Dev
2025-11-28 17:29:29 -06:00
parent e72097c3a5
commit dd006f51dc
4 changed files with 143 additions and 144 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -62,9 +62,13 @@ 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">
<div class="single-property-layout"> <!-- Main Content (full width) -->
<!-- Main Content -->
<div class="single-property-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)); ?>
@@ -191,12 +195,6 @@ while (have_posts()) :
</section> </section>
<?php endif; ?> <?php endif; ?>
</div> </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>
</main> </main>
@@ -51,16 +51,8 @@
padding-bottom: 4rem; padding-bottom: 4rem;
} }
.single-property-layout { .single-property-content {
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
@@ -208,12 +200,21 @@
} }
} }
// Sidebar // Fixed Sidebar
.single-property-sidebar { .single-property-sidebar {
display: none;
@media (min-width: 1024px) { @media (min-width: 1024px) {
position: sticky; display: block;
top: 100px; position: fixed;
align-self: start; top: 120px;
right: 2rem;
width: 320px;
z-index: 100;
}
@media (min-width: 1280px) {
right: calc((100vw - 1200px) / 2);
} }
} }