[Resolved] Cards are not displaying as per demo

I presume you are very busy, responding queries etc. But have added some more short codes with different cards styles (all are broken). And send you my CSS code I have for may page.

Please help. I really love the concept, but at this moment the PRO version is useless for me, as I can’t get the expected design with cards (the reason why I have decided to by the Pro Version)

Example page here: page

/* 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 */

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 */

/* Estilo botón */
div.wpforms-container-full .wpforms-form button[type=submit]{
	padding:10px 20px;
 display: inline-block;
 text-transform:uppercase;
 background-color:#ff1956;;
 color:#ffffff;
 font-size: 14px;
 transition:ease-in-out 0.1s;
} 

.btn-footer{
    display: inline-block;
    position: relative;
    padding: 10px 30px;
    vertical-align: top;
    cursor: pointer;
    font-size: 13px;
    color: #drgrt;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #4dc247;
    background-color: #4dc247;
    border-radius: 3px;
    transition: background .2s linear, border .2s linear;
}
.btn-footer:hover{
  background: #4dc247;
  border: #4dc247;
}

Thanks David! Taht works for me.

Just one question regarding Image and Content positions: If I’m using the “Row” style or “None” and applying 1 Column – how can I get all images on one side (left or right) and Content (title, excerpt, date etc.) opposite side? I have tried with image setting by selecting “Left” & “Right”, but it just collapses the style and not moving images to the side.

https://ibb.co/8jCs4Dy
https://ibb.co/T2hhC9Z
https://ibb.co/YDzc7Xw

Please, could you advise about a possible solution for this?

Many thanks!
Best Regards
Yurik

Hi Elvin! Thanks for reply and offering the code!

I have tried to add the suggested CSS, and it works perfect for desktop, but when I’m viewing the same page on mobile version, looks like the images on every second, fourth, sixth, etc. posts are resized and displayed incorrect. Please see below or try with my demo link:

demo page

Desktop – https://ibb.co/VxPzxMm
Mobile – https://ibb.co/Ln82kj4

Please could you advise if I’ve missed something or how I need to tweak the CSS to enable the same images size for all posts?

Many thanks and Bets Regards
Yurik

Thanks Elvin! Works perfect!

Best regards.
Yurik