Two Column Category Page

Hi,

I would like my posts to appear as two columns on category pages on the desktop and continue to appear as one column on mobile. Is that possible?

Thanks,

Hey again,

This is going to take a bit of CSS, however, it is possible.

The code below cuts the posts width in two so you’re able to get two posts in a row, which is great:

@media (min-width: 768px){
.blog.home .page-1 article.post:first-child {
    width: 50%!Important;
  }
}

After adding the code above, you’ll see that the post on the right sits a little lower than the one on the left. That’s where this code comes in:

@media (min-width: 768px){
.blog.home .page-1 article.post:nth-child(2) .post-inner-content{
  padding-top: 0px!important;
}}

From here, you’ll see where the titles being of varying lengths and pictures being of varying sizes basically throws off the height of the content.

The title spacing could be evened out with the code below:

@media (min-width: 768px){
h2.entry-title {
    height: 35px!Important;
}}

The only thing left is your images. This is pretty difficult since basically, all the images are of different sizes. If you could edit them to be all the same size, you’ll probably have them rows perfectly even.

I hope this helps :slight_smile:

Best Regards,
Support

Wow thank you for your help. When i put the code into the editor it only changes the first post on the homepage. Is there a way to move it so that the only two columns are on the category pages?

Thank you

Hey again,

Kindly add and save the following code to Appearance > Customize > Additional CSS:

@media only screen and (min-width:1024px){
.archive .post {
width: 49%!Important;
display: inline-block;
} }

This should work for all your archive pages.

Please let me know if this works.

Best Regards,
Support

Le théâtre de marionnette birmanie a été précisé par toutes les couches sociales en raison des sourires des marionnettes et des affaires oublié au passé. Aujourd’hui, cet art n’est que l’aspiration culturelle d’une partie de personnes attirées.
En avril chaque année, la plupart des régions de la Birmanie accueille le Nouvel An, donc, si les visiteurs voyagent la Birmanie en ce temps, les visiteurs auront la chance d’admirer les spectacles de marionnettes extraordinaires et impressifs. Le théâtre de marionnettes est habituellement fermé avant de 5 jours pour que les artistes fassent des études sérieuses avec les enseignants d’expérience.

Hey @christinenguyen,
Hope you’re doing well today

I’m not sure I’m understanding the message you sent. Are you having an issue related to the theme? Please let me know so that I may assist.

I look forward to your reply :slight_smile:

Best Regards,
Support

Hi there!

I didn’t create this topic but I used the code you provided here for my website.
I used the last code you made and it works well now! (only on categorie pages as the other user ask ) :slight_smile:

I tried myself too and its great! The only thing is that the post preview on the categorie pages are appearing on the left on the page. Is there anyway to center the preview post ? (attached image) If possible of course :slight_smile:

(I wanted to say to, that, as a person who speak french, I think the comment from the user christine nguyen is a spam comment because it doesn’t mean anything and its only sentences with really weird meaning and subject.)

Have a nice day,
Best Regards

Hi,

This has updated the category pages however it has also affected the homepage still. Is there a way to exclude the homepage?

Thanks for your help,

@shesoutside To achieve this try using the custom CSS solution shared in the following topic.

https://colorlibsupport.com/t/category-grid-2-columns/#post-66701

Thanks Movin, this did create two columns on category pages however one of the posts stays at the top. I’ve attached some screengrabs. do you know why this would be?

Thanks,

Instead of that shared code please try using following custom CSS code.


@media (min-width: 768px) {
    .article-container{
        overflow: hidden;
    }
    .archive.category article.post {
        width: 50%;
        margin: 0;
        padding-right: 10px;
        display: inline-block;
        float: left;
    }
    .archive.category article.post .read-more, .archive.category article.post .entry-footer{
        display: none;
    }
    .archive.category article.post .post-inner-content{
        border: 0;
        padding: 0 0 30px;
    }
    
    .archive.category article.post:nth-child(2n+1){
        clear: left;
        padding-right: 25px;
    }
    .archive.category article.post:nth-child(2n){
        padding-left: 25px;
        padding-right: 0;
    }
}

this worked perfectly thank you!

Where can i review your support for the theme? it’s been fantastic!

You are most welcome here :slight_smile:

You can review our theme here [Activello] Reviews | WordPress.org

Good morning! I love the theme!
I saw in this previous post. Change home page with two post at 100% width and following at 50% width.
I ask: how do I make the first post 100% and all the following 33%?
Thank you

@xavimoya To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/activello/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.