Layout Format Issue

Resolved Anuj
(@anujmakhloga)

1 year, 5 months ago

Hi,

I have customized my homepage to display posts in a two-column layout using CSS. This layout works perfectly on the homepage and even when navigating through pagination links.

However, the same layout does not apply when I open a category via the navigation menu, the posts are displayed in the original format instead of matching the homepage layout.

I’ve tried applying the same layout to the category pages, and while the posts do show in a two-column format, the layout seems completely distorted. Titles, images, and spacing appear inconsistent, making the design look messy.

I’d like the category pages to have the same layout as the homepage without affecting individual post pages. Could you please guide me on how to achieve this?

Here’s the website – wikibuff[dot]com

Thanks in advance and Merry Christmas.

Viewing 5 replies - 1 through 5 (of 5 total)

ying

(@yingscarlett)

1 year, 5 months ago

Hi there,

What is the CSS you added to create the 2 columns layout?

Thread Starter

Anuj

(@anujmakhloga)

1 year, 5 months ago

Hi,

Here’s the complete CSS for creating a two-column layout and improving the overall design –

@media (min-width:768px){

.home .site-main{display:flex;flex-wrap:wrap}
.home .site-content .site-main .post{width:50%;padding-right:20px}
.home .site-main .paging-navigation{width:100%}
}

.separate-containers article.post .inside-article{height:100%;display:flex;flex-direction:column}

.site-main>article.post{margin-bottom:20px!important}

.separate-containers article.post .inside-article .post-image{margin-top:auto}

.separate-containers article.post .inside-article header.entry-header{margin-bottom:20px}

.separate-containers .post .inside-article{padding: 15px 20px 15px 20px;}