We're merging with GenerateBlocks! Learn more here.

[Support request] Row Cards Styling Issue

Please login to receive premium support.

Support for the free plugin can be found here.

Home › Forums › Pro Support › Row Cards Styling Issue

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 29, 2021 at 9:52 am #35065
    Hermann
    Participant

    Hello,

    I am trying to get the Row Cards to show up similar to this website. http://www.nspirement.com https://prnt.sc/1xqp2nl
    Unfortunately I cannot for the life of me figure out how to resize the image and have the title and excerpt align right. The current site I am testing on is http://www.delazing.com.

    Thanks for your help.

    October 31, 2021 at 5:46 pm #35137
    elvin
    Moderator

    Hi Hermann,

    Do you want to specifically apply the style on this WPSP list only?

    If so, try this CSS:

    @media (min-width: 769px) {
    section#wpsp-451954.wpsp-row article:nth-child(even) .wp-show-posts-inner {
        flex-direction: row;
    }

    section#wpsp-451954.wpsp-row .wp-show-posts-image.wpsp-image-left img {
        object-fit: cover;
        width: auto;
        height: 100%;
    }

    section#wpsp-451954 .wpsp-card.wpsp-row .wpsp-content-wrap, 
    section#wpsp-451954.wpsp-row .wp-show-posts-image {
        flex: 1 0 40%;
    }
}

@media (max-width: 768px) {
    section#wpsp-451954.wpsp-row .wp-show-posts-image.wpsp-image-left img {
        width: 100%;
        height: auto;
    }

    section#wpsp-451954 .wpsp-card.wpsp-row .wpsp-content-wrap, 
    section#wpsp-451954.wpsp-row .wp-show-posts-image {
        flex: 1 1 100%;
    }
}

    Change the percentage value of flex: 1 0 40%; to your preference.

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