[Resolved] Adding a 5th column to CC Child Pages

Home Forums Support Adding a 5th column to CC Child Pages

  • This topic has 9 replies, 3 voices, and was last updated 12 months ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1242325
    Tim

    Hello

    CC Child Pages plugin provides 1,2,3 and 4 columns built in, but ideally I would have 5. I noticed that on their support page someone else had asked for 5 cols to be built in but there had been no response to that query in 1 year.

    Is there a way I can workaround that limitation ?

    #1242392
    Leo
    Staff
    Customer Support

    Hi there,

    What does the plugin do?

    Couldn’t you just create that layout with regular columns and images?

    #1242420
    Tim

    Hi Leo

    The plugin gets a list of subpages of a parent, allowing me to show the title, featured image, excerpt etc.

    I have also been using WP Show Posts to achieve the same for posts, but as far as I could see I couldn’t use it to get subpages of a parent.

    Perhaps there is a superior solution ?

    #1242640
    David
    Staff
    Customer Support

    Hi there,

    try this CSS it will change all four column lists to five on desktop only:

    @media (min-width: 769px) {
        .ccchildpages.fourcol {
            display: flex;
            align-items: flex-start;
        }
        .fourcol .ccchildpage {
            width: 18%;
        }
    }
    #1243680
    Tim

    Ah, nice hack David, thank you, that will do the trick for me.

    I noticed I needed to do one further hack to get the child spacing as intended:

    .fourcol .ccpage-count-4 {margin-left: auto;}

    Perhaps that is not the best way to make that work.

    Now I’ve come up against another issue. Whilst the first section shows the “5col” rows as expected, the following section “Experience” has 7 items attempting to fit onto the same row. Is there another hack I can use to have 5 on the 1st row as above, and the last 2 on the 2nd row (centred) ?

    #1244062
    David
    Staff
    Customer Support

    You can make the row wrap and centered like so – when theres more then 5 columns the additional columns will wrap to a new line and center themselves:

    .ccchildpages.fourcol {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: center;
    }
    #1244873
    Tim

    Thank you David, I need to read up on all the flex possibilities.

    So now I have the style of those rows very close to how I want them.

    However, in playing about with the various margin / padding possibilities, I think I’ve slipped off the grid.

    Can you see where I can improve on that ?

    It’s pretty good as is if not.

    #1245126
    David
    Staff
    Customer Support
    #1246071
    Tim

    OK thanks for the affirmation David. 🙂

    #1246244
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.