We're merging with GenerateBlocks! Learn more here.

[Resolved] magazine style grid

Please login to receive premium support.

Support for the free plugin can be found here.

Home › Forums › Pro Support › magazine style grid

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 13, 2021 at 6:23 am #34573
    Juste
    Participant

    Hello. Using WPSP pro, how can I achieve a magazine layout like the one here: https://gpsites.co/dispatch/
    When I use the cards overlay style, I end having the 3 items on 2 rows instead of 1. Please advise.

    October 13, 2021 at 6:26 am #34575
    Juste
    Participant

    edit: I want to show 3 posts, 1 large in the 1st column, and 2 smaller in the last column. Thanks

    October 13, 2021 at 7:26 pm #34602
    elvin
    Moderator

    Hi Juste,

    ASsuming you’re using Dispatch’s layout, you can try this CSS:

    /* magazine Grid Golden Ratio 5 block standard */
/* Add wpsp-grid class to WPSP List shortcode wrapper */
@media (min-width: 600px) {
    .wpsp-grid .wp-show-posts {
        display: grid;
    }
}

@media (min-width: 900px) {
    .wpsp-grid .wp-show-posts {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr auto;
    }

    .wpsp-grid .wp-show-posts article:first-child {
        grid-column: 1 / 5;
        grid-row: 1 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(2) {
        grid-column: 5 / end;
        grid-row: 1 / 2;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3) {
        grid-column: 5 / end;
        grid-row: 2 / 2;
    }

}

@media (max-width: 899px) and (min-width: 600px) {
    .wpsp-grid .wp-show-posts article {
        grid-column: span 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-row: 3;
        grid-column: span 4;
    }
}

    And reduce the Header WPSP to 3 instead of 4.

    October 14, 2021 at 8:17 am #34617
    Juste
    Participant

    Thanks Elvin. It works great. I had to add the rule below, otherwise the cards would not expand full width.

    
.wpsp-grid .wp-show-posts article {
        width: 100%;
    }

    Thanks.

    October 14, 2021 at 5:56 pm #34634
    elvin
    Moderator

    Good catch. Glad you got it to work. No problem. 😀

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