Support Forum

Hi there,

Chrome/FF deals with Flex and CSS grid differently.
The simplest fix is to give the overlay cards container a min-height with some CSS:

.wpsp-overlay .wp-show-posts-inner {
    min-height: 250px;
}

Hi there,

can you share a link to the site so i can see what needs changing

Hi there,

Dispatch, which i am the creator of, was built before the Cards feature existed in WPSP Pro. It’s actually what lead us to create the Cards feature.
We ideally would like to add a Pro version of the site, which would eliminate the custom CSS and Hook Elements that Dispatch requires for its card layouts and remove these conflicts.
I am looking at how we can at least make Dispatch more compatible…

If you’re using WPSP Pro and the Cards feature, then a lot of the customizations that Dispatch installs will need to be removed. There should be no issue with your own custom CSS modifications.

Lets take look at the modifications that are required:

1. To begin with Dispatch with the Free versions requires each shortcode to be wrapped in a <div> with a specific class as explained here:

https://gpsites.co/dispatch/using-wp-show-posts/

This is not required in Pro version as each of those layouts can now be created with a Card List.
So each of the original imported lists with their wrapper can be replaced with a WPSP Card shortcode.

2. Dispatch adds an additional wrqpper to the WPSP Posts using Hook elements, this is not required when using Cards as this is automatically added.

Go to Appearance > Elements and delete the 2 x Hooks titled: WPSP Open Wrapper & WPSP Close Wrapper

3. In the original import the Customizer > Additional CSS would have a fair aamoutn of CSS. Attached here is the CSS Specific to WPSPS:

https://gist.github.com/032bd79e29a1beb752b6d9d1c898e593

Of that CSS the only code required is for the Header Element grid, and those lines are 34 – 96.

4. If you’re using the Header Element grid then you will need to replace the Shortcode in Apperance > Elemnents > Magazine Grid.
The Cards shortcode you use to replace this will need to be a Single Column.

Sorry theres a lot of steps, but there is no simple way around this, as Dispatch uses custom elements and CSS to replicate what Pro does automatically.

Hi there,

this also related the Custom CSS on your site that i referred to in your other topic – see my reply here:

https://wpshowposts.com/support/topic/cards-are-not-displaying-as-per-demo/#post-25213

Unfortunately not as they are being ‘stretched’ apart from uploading a much large image to begin with which could be detrimental to performance – you could minimize that happening by changing the @media query from 1024px to a smaller value eg. 769px then the stacking would only occur on the smaller tablet devices.

Hi there,

try adding this CSS:

@media (max-width: 1024px) {
    .wp-show-posts-columns, .wp-show-posts-inner {
        margin-left: 0 !important;
        margin-right:0 !important
    }

    .wp-show-posts-columns .wp-show-posts-single {
        display: block;
        width:100%
    }

    .wp-show-posts-image.wpsp-image-left, .wp-show-posts-image.wpsp-image-right {
        float: none;
        margin-right: 0;
        margin-left:0;
    }
    .wp-show-posts-image img,
    .wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img{
        width: 100%;
        max-width: unset;
        object-fit: unset;
    }
}

Change the 1024px in this line: @media (max-width: 1024px) to adjust when you want it to display 100% columns

Glad to hear that

Glad to hear that