Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Responsive break for blog columns

Home Forums Support Responsive break for blog columns

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #382731
    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 =)

    GP Premium 1.4.3
    #382816
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #382838
    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

    #382895
    Leo
    Staff
    Customer Support

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

    Please reference the topic. Thanks!

    #382958
    Leo
    Staff
    Customer Support

    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/

    #382970
    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

    #382980
    Leo
    Staff
    Customer Support

    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%;
        }
    }
    #382996
    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

    #383002
    Leo
    Staff
    Customer Support

    Sounds good. Let me know if you get stuck!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.