From c8f943a7226634b6c2f0cb7267569d48fbbb1e7b Mon Sep 17 00:00:00 2001
From: Adolfo Reyna <aeroreyna@gmail.com>
Date: Fri, 13 Mar 2026 10:07:44 -0400
Subject: [PATCH] Fix single article column structure to center wider images

---
 single.php | 191 ++++++++++++++++++++++++++---------------------------
 style.css  |  11 ---
 2 files changed, 92 insertions(+), 110 deletions(-)

diff --git a/single.php b/single.php
index 01acb7a..5950abf 100644
--- a/single.php
+++ b/single.php
@@ -11,112 +11,105 @@ get_header(); ?>
 		the_post();
 		?>
 		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-			<div class="row justify-content-center">
-				<div class="col-lg-8 col-xl-7">
-					<header class="entry-header mb-4">
-						<?php the_title('<h1 class="entry-title display-4 fw-bold font-serif lh-sm mb-4">', '</h1>'); ?>
+			<header class="entry-header mb-4 mx-auto px-3" style="max-width: 680px;">
+				<?php the_title('<h1 class="entry-title display-4 fw-bold font-serif lh-sm mb-4">', '</h1>'); ?>
 
-						<div class="d-flex align-items-center mb-4 pb-4 border-bottom">
-							<div class="me-3">
-								<?php echo get_avatar(get_the_author_meta('ID'), 48, '', '', array('class' => 'rounded-circle')); ?>
-							</div>
-							<div>
-								<div class="fw-bold font-sans text-dark"><?php the_author(); ?></div>
-								<div
-									class="entry-meta text-muted small font-sans d-flex align-items-center flex-wrap gap-2">
-									<span><?php echo wisdom1_reading_time(); ?></span>
-									<span>•</span>
-									<span class="entry-date"><?php echo get_the_date('M j, Y'); ?></span>
-									<?php if (get_comments_number() > 0): ?>
-										<span>•</span>
-										<span><?php comments_number('0', '1 Response', '% Responses'); ?></span>
-									<?php endif; ?>
-								</div>
-							</div>
-						</div>
-					</header>
-
-					<?php if (has_post_thumbnail()): ?>
-						<div class="post-thumbnail-full mb-5">
-							<?php the_post_thumbnail('full', array(
-								'class' => 'img-fluid article-hero-image rounded',
-								'style' => 'aspect-ratio: 16/9; object-fit: cover;'
-							)); ?>
-						</div>
-					<?php endif; ?>
-
-					<div class="entry-content fs-5 lh-lg font-sans text-dark" style="max-width: 680px; margin: 0 auto;">
-						<?php
-						the_content();
-
-						wp_link_pages(
-							array(
-								'before' => '<div class="page-links mt-5"><strong>' . esc_html__('Pages:', 'wisdom1') . '</strong>',
-								'after' => '</div>',
-							)
-						);
-						?>
-					</div><!-- .entry-content -->
-
-					<footer class="entry-footer mt-5 pt-4 border-top">
-						<div class="entry-tags d-flex flex-wrap gap-2">
-							<?php the_tags('<span class="badge bg-light text-dark text-decoration-none fw-normal p-2">', '</span><span class="badge bg-light text-dark text-decoration-none fw-normal p-2">', '</span>'); ?>
-						</div>
-					</footer><!-- .entry-footer -->
-				</div><!-- .col-lg-7 -->
-			</div><!-- .row -->
-		</article><!-- #post-<?php the_ID(); ?> -->
-
-		<div class="row justify-content-center">
-			<div class="col-lg-8 col-xl-7">
-				<nav class="navigation post-navigation mt-5 border-top border-bottom py-4" aria-label="Posts">
-					<div class="row justify-content-between g-4">
-						<div class="col-md-6 text-start">
-							<?php
-							$prev_post = get_previous_post();
-							if (!empty($prev_post)):
-								?>
-								<a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>"
-									class="text-decoration-none d-flex align-items-center gap-3">
-									<?php if (has_post_thumbnail($prev_post->ID)): ?>
-										<?php echo get_the_post_thumbnail($prev_post->ID, 'thumbnail', array('class' => 'post-nav-thumbnail shadow-sm')); ?>
-									<?php endif; ?>
-									<div>
-										<div class="text-muted small fw-bold mb-1 text-uppercase tracking-wider">Previous</div>
-										<div class="fw-bold text-dark lh-sm"><?php echo esc_html($prev_post->post_title); ?>
-										</div>
-									</div>
-								</a>
-							<?php endif; ?>
-						</div>
-						<div class="col-md-6 text-end">
-							<?php
-							$next_post = get_next_post();
-							if (!empty($next_post)):
-								?>
-								<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>"
-									class="text-decoration-none d-flex align-items-center justify-content-end gap-3 text-end">
-									<div>
-										<div class="text-muted small fw-bold mb-1 text-uppercase tracking-wider">Next</div>
-										<div class="fw-bold text-dark lh-sm"><?php echo esc_html($next_post->post_title); ?>
-										</div>
-									</div>
-									<?php if (has_post_thumbnail($next_post->ID)): ?>
-										<?php echo get_the_post_thumbnail($next_post->ID, 'thumbnail', array('class' => 'post-nav-thumbnail shadow-sm')); ?>
-									<?php endif; ?>
-								</a>
+				<div class="d-flex align-items-center mb-4 pb-4 border-bottom">
+					<div class="me-3">
+						<?php echo get_avatar(get_the_author_meta('ID'), 48, '', '', array('class' => 'rounded-circle')); ?>
+					</div>
+					<div>
+						<div class="fw-bold font-sans text-dark"><?php the_author(); ?></div>
+						<div class="entry-meta text-muted small font-sans d-flex align-items-center flex-wrap gap-2">
+							<span><?php echo wisdom1_reading_time(); ?></span>
+							<span>•</span>
+							<span class="entry-date"><?php echo get_the_date('M j, Y'); ?></span>
+							<?php if (get_comments_number() > 0): ?>
+								<span>•</span>
+								<span><?php comments_number('0', '1 Response', '% Responses'); ?></span>
 							<?php endif; ?>
 						</div>
 					</div>
-				</nav>
+				</div>
+			</header>
 
+			<?php if (has_post_thumbnail()): ?>
+				<div class="post-thumbnail-full mb-5 mx-auto" style="max-width: 1000px;">
+					<?php the_post_thumbnail('full', array(
+						'class' => 'img-fluid w-100 rounded',
+						'style' => 'aspect-ratio: 16/9; object-fit: cover;'
+					)); ?>
+				</div>
+			<?php endif; ?>
+
+			<div class="entry-content fs-5 lh-lg font-sans text-dark mx-auto px-3" style="max-width: 680px;">
 				<?php
-				// If comments are open or we have at least one comment, load up the comment template inside the constrained column.
-				if (comments_open() || get_comments_number()):
-					comments_template();
-				endif;
+				the_content();
+
+				wp_link_pages(
+					array(
+						'before' => '<div class="page-links mt-5"><strong>' . esc_html__('Pages:', 'wisdom1') . '</strong>',
+						'after' => '</div>',
+					)
+				);
 				?>
-			</div>
+			</div><!-- .entry-content -->
+
+			<footer class="entry-footer mt-5 pt-4 border-top mx-auto px-3" style="max-width: 680px;">
+				<div class="entry-tags d-flex flex-wrap gap-2">
+					<?php the_tags('<span class="badge bg-light text-dark text-decoration-none fw-normal p-2">', '</span><span class="badge bg-light text-dark text-decoration-none fw-normal p-2">', '</span>'); ?>
+				</div>
+			</footer><!-- .entry-footer -->
+		</article><!-- #post-<?php the_ID(); ?> -->
+
+		<div class="mx-auto px-3" style="max-width: 680px;">
+			<nav class="navigation post-navigation mt-5 border-top border-bottom py-4" aria-label="Posts">
+				<div class="row justify-content-between g-4">
+					<div class="col-md-6 text-start">
+						<?php
+						$prev_post = get_previous_post();
+						if (!empty($prev_post)):
+							?>
+							<a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>"
+								class="text-decoration-none d-flex align-items-center gap-3">
+								<?php if (has_post_thumbnail($prev_post->ID)): ?>
+									<?php echo get_the_post_thumbnail($prev_post->ID, 'thumbnail', array('class' => 'post-nav-thumbnail shadow-sm')); ?>
+								<?php endif; ?>
+								<div>
+									<div class="text-muted small fw-bold mb-1 text-uppercase tracking-wider">Previous</div>
+									<div class="fw-bold text-dark lh-sm"><?php echo esc_html($prev_post->post_title); ?>
+									</div>
+								</div>
+							</a>
+						<?php endif; ?>
+					</div>
+					<div class="col-md-6 text-end">
+						<?php
+						$next_post = get_next_post();
+						if (!empty($next_post)):
+							?>
+							<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>"
+								class="text-decoration-none d-flex align-items-center justify-content-end gap-3 text-end">
+								<div>
+									<div class="text-muted small fw-bold mb-1 text-uppercase tracking-wider">Next</div>
+									<div class="fw-bold text-dark lh-sm"><?php echo esc_html($next_post->post_title); ?>
+									</div>
+								</div>
+								<?php if (has_post_thumbnail($next_post->ID)): ?>
+									<?php echo get_the_post_thumbnail($next_post->ID, 'thumbnail', array('class' => 'post-nav-thumbnail shadow-sm')); ?>
+								<?php endif; ?>
+							</a>
+						<?php endif; ?>
+					</div>
+				</div>
+			</nav>
+
+			<?php
+			// If comments are open or we have at least one comment, load up the comment template inside the constrained column.
+			if (comments_open() || get_comments_number()):
+				comments_template();
+			endif;
+			?>
 		</div>
 
 	<?php endwhile; // End of the loop. ?>
diff --git a/style.css b/style.css
index 65425b5..4806aca 100644
--- a/style.css
+++ b/style.css
@@ -302,17 +302,6 @@ a:hover {
 }
 
 /* --- 5. Article Details Custom Styles --- */
-.article-hero-image {
-	width: 100%;
-}
-
-@media (min-width: 992px) {
-	.article-hero-image {
-		width: calc(100% + 20%);
-		margin-left: -10%;
-	}
-}
-
 .post-nav-thumbnail {
 	width: 80px;
 	height: 80px;