vertically center posts (currently left:0)

Home Forums Product Support Forums Related Posts Pro for WordPress Support vertically center posts (currently left:0)

This topic contains 2 replies, has 2 voices, and was last updated by sank sank 5 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #11968
    sank
    sank
    Participant

    hi,
    trying to use an instance of the RPP vertically but the images are all left:0 and absolute.

    i cant seem to figure out how to make them vertical center on the right side: http://feel.subpac.com/testing/

    This is my CSS:

    .rpp_container>legend {
    display: none !important;
    }
    .rpp_container {
    width:100%;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }
    .rpp_wrapper {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }
    .rpp_wrapper .rpp_item {
    margin: auto !important;
    text-align: center !important;
    }
    .rpp_item .rpp_inner {
    text-align: center !important;
    position: relative !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }
    .rpp_container>legend {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-weight: bold !important;
    }
    .rpp_wrapper .rpp_item .rpp_title {
    padding: 0px 0px !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    #11972
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Solution 1

    You could possibly try this as well to your code:

    .rpp_item.rpp_visible {
        position: static !important;
    }

    It will change the item position back to static, but it will be much easier to center. The ordering will be most likely changed or reversed, since it’s determined by the absolute position. But if that’s not a big issue, then this is the best option.

    Solution 2

    If the order matters, then changing the wrapper to a table layout and then transforming the elements to force them to middle. In this case your CSS code is not needed, only this:

    .rpp_wrapper { display: table !important; }
    
    .rpp_item.rpp_visible {
        left: 50% !important;
        transform: translate(-50%, 0) !important;
    }

    I hope this helps 🙂

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #11983
    sank
    sank
    Participant

    hi
    thanks for getting back to me! 🙂

    i tried the position: static, that worked well but as you said the order is reversed
    – is there a way to randomize the order each time the page is refreshed? that’d be a great feature…

    as for trying display: table, transform: translate(-50%, 0) pushes it outside the box, not centered.

    it required margin: auto !important; as well to center 🙂

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.