[Resolved] Responsive break for blog columns

[Denise]

In the customizer I have set the blog columns to 4. I have the layout container set to 1200. I would like to have more control over when the columns per page goes from 4 to 3 to 2 to 1 as the browser window get smaller. Right now, it goes for 4 to 2 at 1025 pixels. It never goes to three. This is for blog, archive and search pages. I am using a child theme and not using any plugins except your premium GP. I am not using the hooks and filters feature, and instead putting code in the child functions.php.

I have looked at using the code for “add_filter( ‘generate_blog_get_column_count’,’generate_custom_column_count’ )” but that doesn’t control the responsive @media breaks.

Thanks so much for your great theme and super support =)

[Tom]

Hi there,

We’ll likely have to write some media queries. Can you link us to your page possibly? 🙂

[Denise]

Hi Tom,
The site is still under construction and has a password on the site. I can send it to you. Where should I send it?
Thanks,
Denise

[Leo]

Through Account Issue here: https://generatepress.com/contact/

Please reference the topic. Thanks!

[Leo]

Can you give some ideas on what px you would them to change to 3-2-1?

Right now this is the responsive breakpoints: https://docs.generatepress.com/article/responsive-display/

[Denise]

Hi Leo,

Thanks for your quick response. I don’t have the exact pixel points determined yet. I want to be able to play with the layout and decide what looks best. Right now it’s jumping from four columns to two columns. And I’d like a midway time when it is three columns. I’m not basing this on device, but on the fluid browser window size and how the page looks. I will also be playing around with the container width.

If you can tell me the basic methodology, I can figure out the breakpoints myself. So what would be the steps I need to take to control this? I’m pretty comfortable writing css, media queries, php and html.

Thanks,
Denise Dreher
Database Programmer / Analyst
Macalester College

[Leo]

Hmm the code would be slightly different depending on when you want the break point to be.

Try this CSS first to see if you can get the idea:

@media (min-width: 900px) and (max-width: 1200px) {
    .grid-25 {
        width: 33%;
    }
}

[Denise]

Great. Thanks, Leo. I had a feeling that’s what the solution would be, but I didn’t want to implement it without getting the okay from the GP team =)

I have marked this as resolved.

Best wishes,
Denise

[Leo]

Sounds good. Let me know if you get stuck!

[Author]

Posts