Different number of column on the mdium screen

[Hasan]

On archive pages, I am displaying my posts on 4 column in desktop view, which is shown as single column on mobile view automatically, which is perfect!

How can I display the posts in 3 column on the archive pages for the medium screen only?

Thanks!

[Tom]

Hi there,

Give this a shot:

@media (max-width: 1024px) and (min-width: 769px) {
    .generate-columns-container .grid-sizer,
    .generate-columns-container article {
        width: 33.33333%;
    }
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Hasan]

Thanks Tom, but this is not working. Showing the posts on 2 columns instead of 3: http://prntscr.com/nxiedi

[Tom]

Sorry about that – can you try the updated code?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Hasan]

Thanks Tom! The updated code worked fine!!

I am modifying the code further to also make the large phones into 2 columns instead of 1, with the following code:

@media (min-width: 415px) and (max-width: 768px) {
    .generate-columns-container .grid-sizer,
    .generate-columns-container article {
        width: 50%;
    }
}

It split it into 2 column alright, but now there is no space between the columns like it normally shows for the other layouts: http://prntscr.com/nxn2ei

Please suggest how to fix that!

[Tom]

Try this:

@media (min-width: 415px) and (max-width: 768px) {
    .generate-columns-container .grid-sizer,
    .generate-columns-container article {
        width: 50%;
    }

    .generate-columns-activated .generate-columns-container {
        margin-left: -20px;
    }

    .generate-columns-container > * {
        padding-left: 20px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Hasan]

That worked perfectly after adding !important after the two new lines! 🙂

Thank you so much for the awesome support!

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts