We're merging with GenerateBlocks! Learn more here.

[Resolved] Align buttons

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Align buttons

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #33576
    David
    Participant

    Hi everyone,
    I found this article regarding aligning buttons in posts.
    https://wpshowposts.com/support/topic/cards-in-carousel-button-always-at-the-bottom/

    It mentions adding this:

    
    .wpsp-read-more {
        margin-top: auto;
    }
    

    That didn’t work, so I tried:

    
    .wp-show-posts-read-more {
        margin-top: auto;
    }
    

    (because I could not see .wpsp-read-more, but could see .wp-show-posts-read-more)
    But that didn’t work either.
    The page in question I am trying to make it work on is:
    https://wpdave.work/saswa/

    TIA Dave

    #33580
    elvin
    Moderator

    Hi Dave,

    Margin top only works if the parent container is on display: flex;.

    That said, try this CSS:

    section#wpsp-302 .wp-show-posts-inner .wpsp-read-more {
        margin-top: auto;
    }
    
    section#wpsp-302 .wp-show-posts-inner {
        display: flex;
        flex-direction: column;
    }
    #33582
    David
    Participant

    Works perfectly…
    Thanks Elvin!
    Dave

    #33602
    elvin
    Moderator

    No problem. Glad to be of any help. 😀

    #33771
    David
    Participant

    Hi Elvin,
    I have another site where I have 10 or more pages using WP Show Posts.
    Can the CSS be fine tuned so I don’t have to have separate code for each page number (as in wpsp-302)

    TIA, Dave

    #33807
    elvin
    Moderator

    If you want to apply it to ALL WPSP lists, you can remove the section#wpsp-xxxx part.

    But if you want to add more, you add extra selectors.

    Example:

    section#wpsp-302 .wp-show-posts-inner .wpsp-read-more,
    section#wpsp-123 .wp-show-posts-inner .wpsp-read-more,
    section#wpsp-456 .wp-show-posts-inner .wpsp-read-more {
    margin-top: auto;
    }

    section#wpsp-302 .wp-show-posts-inner,
    section#wpsp-123 .wp-show-posts-inner,
    section#wpsp-456 .wp-show-posts-inner {
    display: flex;
    flex-direction: column;
    }

    #33856
    David
    Participant

    Great thanks for that, Dave

    #33862
    elvin
    Moderator

    No problem. 😀

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