adolforeyna/WFK_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix single article column structure to center wider images

Browse Source
This commit is contained in:
Adolfo Reyna
2026-03-13 10:07:44 -04:00
parent bedc33bd1e
commit c8f943a722
2 changed files with 92 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
single.php
View File

@@ -11,9 +11,7 @@ get_header(); ?>
the_post(); the_post();
?> ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="row justify-content-center"> <header class="entry-header mb-4 mx-auto px-3" style="max-width: 680px;">
<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>'); ?> <?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="d-flex align-items-center mb-4 pb-4 border-bottom">
@@ -22,8 +20,7 @@ get_header(); ?>
</div> </div>
<div> <div>
<div class="fw-bold font-sans text-dark"><?php the_author(); ?></div> <div class="fw-bold font-sans text-dark"><?php the_author(); ?></div>
<div <div class="entry-meta text-muted small font-sans d-flex align-items-center flex-wrap gap-2">
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><?php echo wisdom1_reading_time(); ?></span>
<span>•</span> <span>•</span>
<span class="entry-date"><?php echo get_the_date('M j, Y'); ?></span> <span class="entry-date"><?php echo get_the_date('M j, Y'); ?></span>
@@ -37,15 +34,15 @@ get_header(); ?>
</header> </header>
<?php if (has_post_thumbnail()): ?> <?php if (has_post_thumbnail()): ?>
<div class="post-thumbnail-full mb-5"> <div class="post-thumbnail-full mb-5 mx-auto" style="max-width: 1000px;">
<?php the_post_thumbnail('full', array( <?php the_post_thumbnail('full', array(
'class' => 'img-fluid article-hero-image rounded', 'class' => 'img-fluid w-100 rounded',
'style' => 'aspect-ratio: 16/9; object-fit: cover;' 'style' => 'aspect-ratio: 16/9; object-fit: cover;'
)); ?> )); ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
<div class="entry-content fs-5 lh-lg font-sans text-dark" style="max-width: 680px; margin: 0 auto;"> <div class="entry-content fs-5 lh-lg font-sans text-dark mx-auto px-3" style="max-width: 680px;">
<?php <?php
the_content(); the_content();
@@ -58,17 +55,14 @@ get_header(); ?>
?> ?>
</div><!-- .entry-content --> </div><!-- .entry-content -->
<footer class="entry-footer mt-5 pt-4 border-top"> <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"> <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>'); ?> <?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> </div>
</footer><!-- .entry-footer --> </footer><!-- .entry-footer -->
</div><!-- .col-lg-7 -->
</div><!-- .row -->
</article><!-- #post-<?php the_ID(); ?> --> </article><!-- #post-<?php the_ID(); ?> -->
<div class="row justify-content-center"> <div class="mx-auto px-3" style="max-width: 680px;">
<div class="col-lg-8 col-xl-7">
<nav class="navigation post-navigation mt-5 border-top border-bottom py-4" aria-label="Posts"> <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="row justify-content-between g-4">
<div class="col-md-6 text-start"> <div class="col-md-6 text-start">
@@ -117,7 +111,6 @@ get_header(); ?>
endif; endif;
?> ?>
</div> </div>
</div>
<?php endwhile; // End of the loop. ?> <?php endwhile; // End of the loop. ?>
</main><!-- #main --> </main><!-- #main -->

11
style.css
View File

@@ -302,17 +302,6 @@ a:hover {
} }
/* --- 5. Article Details Custom Styles --- */ /* --- 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 { .post-nav-thumbnail {
width: 80px; width: 80px;
height: 80px; height: 80px;