Different number of column on the mdium screen

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 :)

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

Sorry about that - can you try the updated code?

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!

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

That worked perfectly after adding !important after the two new lines! :)

Thank you so much for the awesome support!

No problem :)