flex-box justify center

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #11795
    sank
    sank
    Participant

    hi – how do make the items all flex-box justify center? right now they are all starting from the left leaving gaps at the end of the item-list…

    i had this code from another plug that worked but if i add i to the custom CSS it’s braking this plugin’s layout:

    #horiz div[id^=”relatedpostspro_0_”],
    #horiz div[id^=”relatedpostspro_0_”].rpp,
    #horiz div[id^=”relatedpostspro_0_”].rpp *,
    #horiz div[id^=”relatedpostspro_0_”] * {
    width: 100% !important;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
    }

    • This topic was modified 5 years, 5 months ago by sank sank.
    • This topic was modified 5 years, 5 months ago by sank sank.
    • This topic was modified 5 years, 5 months ago by sank sank.
    #11798
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    I would not recommend using that CSS, it sets a flex layout on all descendants of the main container, and it indeed will break the layout.

    Instead, try something like this one:

    .rpp_wrapper {
    	display: flex !important;
    	justify-content: center !important;
    	flex-wrap: wrap;
    	max-height: 1400px !important;
    }
    
    .rpp_wrapper .rpp_item {
    	position: static !important;
    	max-height: 200px !important;
    }

    I cannot guarantee it will work, as the there are calculations done via javascript, when chancing the screen layout, but it’s worth a try.

    Best,
    Ernest Marcinko

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


    #11801
    sank
    sank
    Participant

    ahh ok that works 🙂

    also – how do i center the title text? cant seem to make it happen via CSS…

    And lastly:
    i have custom post type “portfolio” and posts – the results only show posts inside a posts page, and portfolio in side a portfolio page…

    how do i get it to show from both assets inside any page?
    it doesn’t seem to be weighing the tags when a post and a custom post have the same tags…

    #11803
    sank
    sank
    Participant

    actually – that CSS makes only the first item link the whole section…

    still:
    i have custom post type “portfolio” and posts – the results only show posts inside a posts page, and portfolio in side a portfolio page…

    how do i get it to show from both assets inside any page?
    it doesn’t seem to be weighing the tags when a post and a custom post have the same tags…

    #11804
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    It looks like the overlay might be flowing into the content. Try add this css too:

    .rpp_item .rpp_inner {
        position: relative !important;
    }

    It will make sure the overlay stays within the items.

    It didn’t show posts on one page and portfolios on others, because the portfolio category was selected for matching – and posts does not have portfolio categories. And it didn’t show portfolio pages on posts because categories and tags doesn’t exist for portfolios. They all have different taxonomies.
    I have disabled matching taxonomies, and now I can see mixed results for both posts and portfolios.

    Best,
    Ernest Marcinko

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


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

You must be logged in to reply to this topic.