[Resolved] Query Loop – Number of posts to display but responsive

[Nick]

Hi,

I’m trying to use Query Loops to display 3 posts in 3 columns on desktop and then drop back to two posts in 2 columns on tablet size and 1 post in 1 column on mobile. Looking at the Query Loop block Posts per page option this doesn’t appear to be responsive at all.

Is there a better way to handle this? I basically want to show three featured posts but have it vary dependant on device view so there isn’t a row of three forced into the width of tablet (too cramped). At the same time don’t want to show three posts with two columns which visually wouldn’t be good.

I’m currently using WP Show Posts on most pages but trying to revamp this to use the Query Loop. I’ve got a number of instances of lists of posts like Work as well where I’d like to be able to tweak this. I’d probably vary how it works throughout the site.

Thanks,
Nick.

[David]

Hi there,

Query Loop parameters are not responsive as those are a server side functionality, not a simple styling change.
To do that would require either Ajax loading or server side scripting to determine what device is being viewed and changing the query accordingly. Both of which require custom development.

CSS solutions are something simpler. You could do something like this:

@media(max-width: 1024px) and (min-width: 769px) {
    .custom-tablet-row .gb-query-loop-item:first-child {
        width: 100% !important;
    }

    .custom-tablet-row .gb-query-loop-item:first-child>.gb-container figure {
        float: left;
        width: calc(50% - 25px);
        margin-right: 50px;
    }
}

Then select the Query Loop -> Grid Block you want to alter, and in Advanced > Additional CSS Class(es) add: custom-tablet-row

This will provide a table layout like this:

https://www.screencast.com/t/tndKePzDnpZK

[Nick]

Hi David,

Thanks for the help with this.

I’m going to have to rethink this. I might just do three separate Query Loops and enable/disable the containers based on screen size. Not a perfect solution but I think it’ll give me the control I want on the fornt page.

Thanks again,
Nick.

[David]

You can use the nth-child selector to hide them using CSS.
Foe example:

@media(max-width: 1024px) and (min-width: 769px) {
    .custom-tablet-row .gb-query-loop-item:nth-child(3) {
        display: none !important;
    }
}

@media(max-width: 768px) {
    .custom-tablet-row .gb-query-loop-item:nth-child(2),
    .custom-tablet-row .gb-query-loop-item:nth-child(3) {
        display: none !important;
    }
}

This will save adding more queries to the page.

[Author]

Posts