[Support request] Pro Cards Layout Not Compatible with Dispatch Theme

I’m really confused right now. I’m currently using the dispatch theme for generatepress(premium). I’ve also purchased wp show posts pro. Upon activating pro, I tried to utilize the card layouts, I even chose the button to ‘set card styles’. Several times even. However, it was never applying the styles properly like the demo.

Upon more investigating, I noticed this thread: https://wpshowposts.com/support/topic/cards-are-not-displaying-as-per-demo/

In this thread, it appears to me this user is using the same dispatch theme as I am. Yet the response is “YOUR css code is conflicting with wp sho post css code”. Please remove this code so there is no conflicts.

Problem is, a lot of that code is styling the dispatch theme wp show posts. No big deal right? I don’t mind using the show posts default styling from the pro plugin. However, in an effort to start completely clean, I removed ALL custom css from dispatch (wp customizer). I wanted to make sure that wp show posts pro was going to display the way I needed according to the styles in the demo. However, I did not get that at all. My output looks terrible.

Then I noticed this blog post and how it references the same person who made the wp show posts, was the same person who made the dispatch theme. Why on earth would this person make conflicting code? Could that really be a giant mistake on his behalf? I feel like I shouldn’t have to remove any custom css if it was properly assigned classes that wouldn’t conflict with each other.

1. I want to be able to use all my dispatch default css code from without conflicting with any of the show post pro plugin styles. Is this possible? If so, how?
2. I would assume choosing ‘set card styles’ would default my settings to look like the demo. But it didn’t do that. Is that possibly a bug? Do I really need to do the manual work to make it look like the demo? If so, why would there be a button to ‘set card styles’?

Here is my playground page. https://fluentonmsft.com/new-home

Here is the original code for dispatch theme.
/* GeneratePress Site CSS */ /* Colors */
.main-navigation ul li:after {
background-color: #000;
}

.main-navigation .inside-navigation {
border-top: 0.5px solid #d4d7d8;
}

.wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
color: #fff;
}
.navigation-search.nav-search-active {
background-color: rgba(255,255,255,0.95);
top: 100%;
}

/* Theme Global */
@media (min-width: 769px) {
body {
margin: 0 30px;
}
}

body.single-post.no-sidebar .site-content {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}

/* Navigation */
.second-nav.grid-container {
padding: 0;
}

@media (min-width: 769px) {
.main-navigation ul li {
position: relative;
}

.main-navigation ul li:after {
content: ”;
position: absolute;
height: 0;
width: 100%;
bottom: 0;
left: 0;
pointer-events: none;
filter: hue-rotation(90deg);
-webkit-filter: hue-rotation(90deg);
-webkit-transition: height 0.35s ease;
transition: height 0.35s ease;
}

.main-navigation ul li:hover:after, .main-navigation ul li.current-menu-item:after {
height: 6px;
}
}

/* Widgets */
.widget-title {
margin: 1em 0;
font-size: 0.8em !Important;
}

.widget .wp-show-posts article {
margin-bottom: 0.5em !important;
}

.zero-padding {
padding: 0 !important;
}

.widget.no-background {
background-color: transparent;
}

/* Buttons */
button, html input[type=”button”], input[type=”reset”], input[type=”submit”], a.button, a.button:visited, a.wp-block-button__link:not(.has-background) {
pointer-events: initial !important;
border-color: inherit;
border: 1px solid;
}

/* Page Heros */
.page-hero.overlay {
-webkit-box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
}

.gradient-overlay {
position: relative;
z-index: -1;
}

.gradient-overlay:after {
content: ”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(3, 89, 155, .5)), to(rgba(14, 161, 234, .6)));
background: linear-gradient(rgba(3, 89, 155, .5), rgba(14, 161, 234, .6));
z-index: -1;
}

/* Blog */
.generate-columns .inside-article {
padding: 0 0 15px;
}

@media (max-width: 768px) {
.generate-columns .inside-article>*:not(.post-image) {
padding: 0 15px;
}
}

.generate-columns-container article .inside-article .post-image {
margin-bottom: 0.5em;
}

.generate-columns-container article .inside-article .entry-summary {
margin-top: 0.5em;
font-size: 0.8em;
}

.generate-columns-container article .entry-header, .wp-show-posts-entry-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}

@media (min-width: 768px) {
.generate-columns-container article .entry-header .entry-title, .wp-show-posts article .wp-show-posts-entry-title {
line-height: 2.5ex;
height: 5ex;
overflow: hidden;
text-overflow: ellipsis;
}
}

.wp-show-posts .wp-show-posts-inner {
overflow: hidden;
}

@media (min-width: 420px) {
.wpsp-align .wp-show-posts-image {
margin-bottom: 0;
}
}
.wpsp-align .wp-show-posts-image a, .wpsp-align .wp-show-posts-image img {
height: 100%;
}

.generate-columns-container article .inside-article img, .wp-show-posts-image img {
-o-object-fit: cover !important;
object-fit: cover !important;
}

/* WPSP Grids */
/* Single column align side image */
/* Add wpsp-align class to to WPSP List shortcode wrapper */
@media (min-width: 420px) {
.wpsp-align .wp-show-posts-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.wpsp-align .wp-show-posts-inner>div {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}

@media (max-width: 768px) and (min-width: 420px) {
.wpsp-align .wp-show-posts-inner .wp-show-posts-image {
margin-right: 1.5em;
}
}

/* 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 / 7;
grid-row: 2 / 4;
}

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

@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 2;
}
}

.wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
height: 250px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}

.wpsp-grid article:first-child .wp-show-posts-image a img {
height: 500px;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}

.wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
display: none;
}

/* WPSP Card Styling */
/* Add wpsp-card class to WPSP List shortcode wrapper */
.wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
}

:not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image {
margin-bottom: 0 !important;
}

.wpsp-card .wp-show-posts-inner {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.wpsp-card .wpsp-content-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 5% 8%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.35);
background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}

.wpsp-card article {
position: relative;
overflow: hidden;
}

.wpsp-card article, .wpsp-card article .wp-show-posts-image img {
-webkit-backface-visibility: hidden;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}

.wpsp-card article:hover .wp-show-posts-image img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}

/* Post Navigation */
#post-nav a {
-webkit-box-flex: 1;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

@media (max-width: 768px) {
#post-nav a {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
}

#post-nav, #post-nav .post-nav-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#post-nav {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 60px;
}

#post-nav .post-nav-wrap {
background-size: cover !important;
background-position: center center !important;
min-height: 120px;
height: 100%;
padding: calc(6% + 1em) 5%;
-webkit-box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 -50px 70px 20px rgba(0, 0, 0, 0.5);
-webkit-transition: -webkit-box-shadow 500ms;
transition: -webkit-box-shadow 500ms;
transition: box-shadow 500ms;
transition: box-shadow 500ms, -webkit-box-shadow 500ms;
position: relative;
box-sizing: border-box;
}

#post-nav .post-nav-wrap:hover {
-webkit-box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 -90px 70px 20px rgba(0, 0, 0, 0.5);
}

.post-nav-wrap>* {
color: #fff;
}

.post-nav-date {
font-size: 0.9em;
}

.post-nav-title {
margin: 5px 0 !important;
}

.post-nav {
min-width: 60px;
position: absolute;
top: 0;
border-radius: 0 0 2px 0;
}

.post-nav:first-child {
left: 0;
}

.post-nav:last-child {
right: 0;
}

.post-nav {
padding: 6px 12px;
border-radius: 3px;
font-size: 0.7em;
text-transform: uppercase;
background-color: #ff1956;
color: #fff !important;
}

.header-widget .lsi-social-icons li {
margin-bottom: 0 !important;
}

body .happyforms-flex {
padding: 0;
}
/* End GeneratePress Site CSS */

/* Social Icons */
.social-home, .home-logo {text-align:center;margin-bottom:.5rem;}
ul.social.social-header {padding:0;margin:0;}
ul.social li {padding:.5rem 0;}
ul.social li:last-child {padding-right:0;}
.social-icon {background:#fff;border: solid 1px #8a8886;border-radius:50%;padding:1rem .25rem;}
.social-icon:hover {border: solid 1px #605e5c;}
.social-header .social-icon {border: solid 1px #a19f9d;}
.social-header .social-icon:hover {border: solid 1px #d2d0ce;}
.social-icon img {margin-bottom:.4rem;height:48px;}
.social-counter {margin:.5rem auto;}
.socialcounter-legend {font-size:.9rem;}

li.teams-share {display:none !important;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
li.teams-share {display:inline-block !important;}
}