[Resolved] Cards are not displaying as per demo

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Cards are not displaying as per demo

Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #25164
    Yurik
    Participant

    Hi,

    I have recently purchased the pro ver of this plugin, and now I’m trying to set up some design on the website by using the pre-build futures under “CARDS”

    However, when I’m selecting from the list and setting the styles of some Cards – they are not displaying on my site as I can see them on your demos (E.x. the “Row” style). Basically, as per WPS demo – with the “Row” style, the image of the post is moved on one side and the content is displayed on the opposite side. In my case, the plugin has dropped all in the same (one) window

    Please have a look on my demo page (I have used the “Row” style) and please help me to resolve and configure it as your demo. https://spainru.com/test/

    MANY THANKS
    Yurik

    #25166
    Yurik
    Participant

    I’m trying to use different “Cards” styles and most of them are not displaying as on your demos. Even if I’m not changing any settings (just selecting one or another style) they’re just showing wrong 🙁

    I have tried with Base, Row, Polaroid and no success.

    Please help!

    Regards
    Yurik

    #25196
    Yurik
    Participant

    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;
    }
    
    #25213
    David Beckwith
    Participant

    Hi there,

    sorry for the late reply, your Custom CSS is causing the issue, there are several CSS Rules that are targeting wpsp-* or wp-show-posts-* classes that are affecting the Cards latyout. Try removing those specific CSS rules to fix the issue.

    #25230
    Yurik
    Participant

    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

    #25238
    elvin
    Participant

    Hi,

    “Row” style adds this CSS in:

    .wpsp-row article:nth-child(even) .wp-show-posts-inner {
        flex-direction: row-reverse;
    }

    What this does is, it reverses the order of row elements on “even” articles. (2th,4th,6th,8th,10th and so on)

    If you want all the images to stay to the left, we can override the default CSS of “Row” by adding this CSS:

    .wpsp-row article:nth-child(even) .wp-show-posts-inner {
        flex-direction: row !important;
    }
    #25279
    Yurik
    Participant

    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

    #25298
    elvin
    Participant

    Let’s add in @media rule so it doesn’t interfere with the mobile breakpoint.

    Try this CSS instead.

    @media(min-width: 560px){
    .wpsp-row article:nth-child(even) .wp-show-posts-inner {
        flex-direction: row !important;
    }
    }
    #25366
    Yurik
    Participant

    Thanks Elvin! Works perfect!

    Best regards.
    Yurik

    #25368
    elvin
    Participant

    Nice one. No problem. 🙂

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