Suite Two Column category page

Activello
1

Hello there,

I actually wanted too to create a two column category page.
I saw that this topic already existed https://colorlibsupport.com/t/two-column-category-page/
and I used the last code mentionned in it :

@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;
    }
}

I tried it and the result doesn’t seem correct (attached picture). I went on the website of the other participant and it looked great. I also try to change the width, margin…etc but I can’t making look correct (center, middle witdh…). Do I need to also use the other CSS code provided in the same thread ? Or to change only a specific number ?
As always I’m sure I’m missing something.

If you have any advice it will be a big help :smiley:

Wish you a good day,

Best Regards

2

Here is the link of my website if you need to troubleshoot : www.celine-lunakim.com

It’s under maintenance so you will need the code below to see it:

admin user : c7l6n4e26

password : GZ8U@7@UJG

Kind Regards,

Celine Lunakim

3

Hi Celine,

I hope you are well today and thank you for your question.

It seems you want to mke first category archive post full width which you can achieve using following custom CSS code.

.archive.category #main article.post:nth-child(2) {
    padding: 0;
    width: 100%;
}

Best Regards,
Movin

4

Hi again Movin,

I’m sorry I think I was confused and didn’t explained properly. (My english is not that good)
The code your provide above works really well but it is not the “effect” that I wanted to achieve.

The first picture I re-attached is showing my curent website. I don’t know why there is a post who is attached to the top. (I think that 's why it was confusing)

The second picture re-attached is showing what I would like it to be.

The CSS code from before worked :

@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;
    }
}

however there is one post who’s attached to the top. The other problem is the size. I tried to change the size of the width or margin (to look like the second picture I attached) but when I change size or try to center the two column, it’s just not working and going back to the normal one column.

Is there anyway to making look like two column with pictures with bigger size ?

Thank you for your previous reply,

Best Regards

Celine

ps: I invented 4 blog posts with photshop on the second image-exemple attached to show you what I would like it to be.

5

Hi there,
Thanks for keeping in touch with us.

From my end, everything looks perfect (see screenshot).

Are you seeing the same thing from your end? If not, you’ll need to clear your browser cache and see if that works.

I look forward to your reply :slight_smile:

Best Regards,
Support

6

Hello there again,

I saw the screenshot you attached and I think its a screenshot from my homepage. My homepage works really well :slight_smile:

My problem is on the category pages (DIY, LIFESTYLE, FASHION).

I wanted to do the same two column grid on category pages as mentionned in this thread : https://colorlibsupport.com/t/two-column-category-page/ however when I tried it it doesnt look like what it would be.

So sorry for being not too precise… I hope it’s not too confusing.

Have a nice day,

Best Regards,

Celine

7

To achieve this try using below custom CSS code instead of above shared.

@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-of-type(2n+1){
        clear: left;
        padding-right: 25px;
    }
    .archive.category article.post:nth-of-type(2n){
        padding-left: 25px;
        padding-right: 0;
    }
}