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
  • #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.

    #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.

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