[Resolved] Arhives Layout for Mobile

[Suggie]

Hi guys. Currently archives layout shows posts in single column on mobile. Is it possible to set up the mobile archive layout to show as two columns? I’d like to be able to show 2 posts at a time on mobile side by side (as it does on tablet), while keeping desktop layout to show 3 across. And I’d like it to apply to all archives (categories, tags, search results, etc.) (Sorry if my terminology is off. N00b. 🙂 )

Thanks!

[Leo]

Hi there,

I don’t think you would have enough room to make it not look crammed.

You can try this CSS first for archive pages:

@media (max-width: 768px) {
    .archive .post.mobile-grid-100 {
        width: 50%
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Suggie]

Hi Leo. I tried the CSS, but what it’s now doing is making the viewing area on the phone 50%. So instead of 2 posts taking up the whole width, two posts are crammed into 50% (so they’re now taking up 25% of the width each) and the other 50% is just a white background.

Thanks.

[Leo]

Can you guide me to an archive page?

[Suggie]

https://adventuresofthegassysquirrel.com/tag/las-vegas

[Leo]

Modified the code slightly: https://generatepress.com/forums/topic/arhives-layout-for-mobile/#post-506443

Let me know.

[Suggie]

Poifect! I added 5px padding, and it looks great. I’d like to set up all my archives on mobile to look this way as well – search results, categories, and whatever else there is that I don’t know about. 🙂 I’m assuming they need something that corresponds to “.archive?”

Thank you!

[Suggie]

Actually, sorry, hit submit before I checked. Works great for categories, and I added “.search” which seems to have done the trick for the search results. Is there anything else I need to do?

[Leo]

Nope. Category pages should have the .archive tag as well so no need for another set of code 🙂

[Suggie]

Thank you!

[Leo]

No problem!

[Author]

Posts