2 columns in blog archive (Mobile view)

Hi @carlosvai,

It’s not possible at the moment to adjust the number of columns for the Blog/Archive page on mobile, sorry.

Kind regards,
Herman ??

Thanks for your answer.

Sorry to insist, but recently I saw a similar question about the WooCommerce product archive. They gave him an answer related to a CCS modification

@media (max-width: 922px) {
    .woocommerce[class*="columns-"].columns-3 > ul.products li.product {
        width: unset;
        margin-right: unset;
    }
}

I bet there must be a way to adapt a code like that to a normal archive page.

I’m so close to fix this issue which has been driving me nuts for almost 2 years now. Please can you give me a direction of what class or id should I be looking to so I can make a 2 column archive page?

Thanks again.

I managed to achieve it (partially) inserting this ccs code

.ast-plain-container .ast-grid-2 .ast-article-post, .ast-plain-container .ast-grid-3 .ast-article-post, .ast-plain-container .ast-grid-4 .ast-article-post, .ast-page-builder-template .ast-grid-2 .ast-article-post, .ast-page-builder-template .ast-grid-3 .ast-article-post, .ast-page-builder-template .ast-grid-4 .ast-article-post {
    width: 50%;
}

.ast-col-sm-1, .ast-col-sm-10, .ast-col-sm-11, .ast-col-sm-12, .ast-col-sm-2, .ast-col-sm-3, .ast-col-sm-4, .ast-col-sm-5, .ast-col-sm-6, .ast-col-sm-7, .ast-col-sm-8, .ast-col-sm-9 {
    float: left;
}

I say partially cause it won’t let me filter the media size, when I insert @media (max-width: 922px) or something like that it doesn’t work. And also the alignment is not perfect in some rows.

Any help will be greatly appreciated.

Ok… last post I promise XD.
But in case someone has the same issue.
This is the code I finally came up with to make a 3 column archive page.
Of course I used parameters the I need, YMMV

.ast-plain-container .ast-grid-2 .ast-article-post, .ast-plain-container .ast-grid-3 .ast-article-post, .ast-plain-container .ast-grid-4 .ast-article-post, .ast-page-builder-template .ast-grid-2 .ast-article-post, .ast-page-builder-template .ast-grid-3 .ast-article-post, .ast-page-builder-template .ast-grid-4 .ast-article-post {
    width: 33%;
}
.ast-col-sm-1, .ast-col-sm-10, .ast-col-sm-11, .ast-col-sm-12, .ast-col-sm-2, .ast-col-sm-3, .ast-col-sm-4, .ast-col-sm-5, .ast-col-sm-6, .ast-col-sm-7, .ast-col-sm-8, .ast-col-sm-9 {
    float: left;
}
  .ast-col-lg-12, .ast-col-lg-2, .ast-col-lg-3, .ast-col-lg-4, .ast-col-lg-5, .ast-col-lg-6, .ast-col-lg-7, .ast-col-lg-8, .ast-col-lg-9, .ast-col-md-1, .ast-col-md-10, .ast-col-md-11, .ast-col-md-12, .ast-col-md-2, .ast-col-md-3, .ast-col-md-4, .ast-col-md-5, .ast-col-md-6, .ast-col-md-7, .ast-col-md-8, .ast-col-md-9, .ast-col-sm-1, .ast-col-sm-10, .ast-col-sm-11, .ast-col-sm-12, .ast-col-sm-2, .ast-col-sm-3, .ast-col-sm-4, .ast-col-sm-5, .ast-col-sm-6, .ast-col-sm-7,  .ast-col-sm-9, .ast-col-xl-1, .ast-col-xl-10, .ast-col-xl-11, .ast-col-xl-12, .ast-col-xl-2, .ast-col-xl-3, .ast-col-xl-4, .ast-col-xl-5, .ast-col-xl-6, .ast-col-xl-7, .ast-col-xl-8, .ast-col-xl-9, .ast-col-xs-1, .ast-col-xs-10, .ast-col-xs-11, .ast-col-xs-12, .ast-col-xs-2, .ast-col-xs-3, .ast-col-xs-4, .ast-col-xs-5, .ast-col-xs-6, .ast-col-xs-7, .ast-col-xs-8, .ast-col-xs-9 {
    padding-left: 2px;
    padding-right: 2px;
		margin-top: -10px;
}
.entry-title {
    font-size: 15px;
}
.entry-meta, .entry-meta * {
    font-size: 12px;

}

Cheers

Hi @carlosvai,

Thank you for sharing this. I believe this would useful for someone who wants to achieve the same thing.

Anyway, please mark the topic as Resolved and let us know if there’s anything else we can help you with.

Have a nice day and stay safe!

Kind regards,
Herman ??