Adding a 5th column to CC Child Pages

[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 ?

[Leo]

Hi there,

What does the plugin do?

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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 ?

[David]

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%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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) ?

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[David]

Looks fine to me

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tim]

OK thanks for the affirmation David. 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts