Sorry to ask again

Hi there,

there is more to it then just some CSS, we're looking at writing up some documentation on how to do this, if you don't mind waiting.

As a note Tom is working on a WP Show Posts Pro update that will simplify creating this type of thing.

i've bought wp show posts pro. is there an easy way to do it now i have upgraded?

Hi there,

so to begin if you log into your WP Show Posts Account, you will find a link to the Alpha version, which includes a Cards options. You can see the demos for each of the card styles here:

https://demos.wpshowposts.com/cards/

Test that out to see how its working and then let me know and ill step through how to create grid layout.

ok yeah i have installed wp show posts pro, but i still have the wp show posts plugin installed as well so i don't know if that would cause any conflict.

Also I had custom css on the wp show posts plugin, so i dunno if i have to remove that

my url is https://www.greatestreviews.co.uk

Both plugins are required. Don't need the additional CSS - you can remove and put that somewhere safe ( if you want ).
The Polaroid card you're using is best designed for single columns. two columns at the most if the page is reasonably wide.
The card grid in the Dispatch site is more like the Overlay card. If you want to apply that then i can have a look at the CSS needed.

ok i have changed it to the overlay

what css do i need to remove and do i need to add any additional css?

also i have some css in the additional css that is related to wp show posts. would that likely be css i have added myself because it's in the additional css section? so i could remove that couldn't i?

Yes, you can remove the CSS for WP Show posts from the additional CSS.
I am not seeing the updated cards on the site. Make sure its the correct shortcode being displayed, and if it is can you clear any plugin caches you have.

it's definetly on overlay mode

i changed it to overlay 1 now

Can you do the following:

1. Create a new WP Show Post List.
2. Select the Cards: Overlay and click the Set Cards Style button.
3. Set the number of posts to 4. And the Columns to 1.

Create a new test page and add the WPSP shortcode to that page. Once done link me to that page.

https://www.greatestreviews.co.uk/test-page/

Cool, so can you edit that WP Show List and go to the More Settings Tab. In the Section HTML Classes Field add: wpsp-grid

Then add this CSS:

@media (min-width: 600px) {
    .wpsp-grid {
        display: grid;
    }
}

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

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

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

    .wpsp-grid article:nth-child(3) {
        grid-column: 5 / 7;
        grid-row: 2 / 4;
    }

    .wpsp-grid article:nth-child(4) {
        grid-column: 7 / end;
        grid-row: 2 / 4;
    }
}

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

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

.wpsp-grid.wpsp-card .wp-show-posts-single {
    margin-bottom: 0 !important;
}

Once you have done that you add that Shortcode to a Header Element:

https://docs.generatepress.com/article/header-element-overview/

This will allow you to display it across the top of the content.

CAn i use it in sections?

ok i think it's working but my featured images are too small so i'll probably have to go over each one and make them bigger.

also it seems to have a black overlay on them?