WordPress博客归档页面右侧截断及列布局调整求助

Hey Samantha, let's work through each of your archive page problems step by step—all of these can be resolved with custom CSS, which you can add directly to your theme's customizer (Appearance > Customize > Additional CSS) to avoid losing changes when your theme updates.

1. Fixing Content Truncation on Archive Pages #

The right-side truncation is almost always a width or overflow issue specific to your archive template. Try adding this CSS first, targeting the main content area of your archive pages:

/* Fix archive page content truncation */
.archive .site-main {
    width: 100%;
    overflow: visible;
    padding-right: 1rem; /* Adjust this value to match your theme's spacing */
}

/* If truncation happens inside individual post cards */
.archive .post-card {
    box-sizing: border-box;
    padding-right: 1rem;
}

If this doesn't work, right-click the truncated area in your browser, select "Inspect" to open dev tools, and check if there's a container with a fixed width or overflow: hidden property—we can tweak that specific selector if needed.

2. Adjusting Archive Page Column Layout #

To control the number of columns on your archive page, use CSS Grid (it’s flexible and responsive). Here’s a snippet that creates a grid that adapts to screen size:

/* Set up responsive columns for archive posts */
.archive .post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2.5rem; /* Adjust spacing between posts */
}

• Change minmax(280px, 1fr) to adjust column width—bigger values mean fewer columns.
• Tweak gap to increase or decrease the space between post cards.

3. Setting Featured Image to 2:3 Ratio & Vertically Centering Post Info #

For the 2:3 aspect ratio on featured images, use the aspect-ratio CSS property. To vertically center post details (like title, excerpt), use Flexbox on the post card container:

/* Set featured image to 2:3 width:height ratio */
.archive .post-thumbnail img {
    aspect-ratio: 2/3;
    object-fit: cover; /* Ensures image scales without distortion */
    width: 100%;
}

/* Vertically center post information */
.archive .post-card .post-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; /* Makes content area take full card height */
    padding: 1rem 0;
}

If your theme uses different class names (e.g., wp-block-post instead of post-card), use browser dev tools to find the correct selectors for your featured images and post content containers.

内容的提问来源于stack exchange，提问作者Samantha