Centering even-number of child-pages

  • Resolved warmsweaters

    (@warmsweaters)


    9 years, 7 months ago

    Hi! I’m using the grid layout for some of a page, and the grid features the child-pages of that page.

    It looked great with 3 child-pages since the grid has three columns, but I’ve deleted a child-page and it just looks a bit awkward with two, since it still falls into a grid and is left-justified. (So it looks like the 3rd, right-most has an empty space where the 3rd childpage was).

    Is there any way to center the child-pages when you have an even number of them and you’re using the grid template?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Could you please provide a link to a page on your site that you want centered so we can take a look directly.

    Thread Starter warmsweaters

    (@warmsweaters)

    This is a parent page, and the two child pages are “Creating Opportunity” and “Meet the Founder.” Is there any way to center those two on the parent page?

    Moderator Kathryn Presner

    (@zoonini)

    Thanks for the link. That’s a WordPress.com site, but these forums are for folks running WordPress on their own server.

    You would need Custom CSS to make these sorts of layout modifications on WordPress.com, which is an upgrade available with the Premium or Business plan:

    https://wordpress.com/plans

    You can get hands-on help with CSS on WordPress.com sites in the CSS Customization forum:

    https://en.forums.wordpress.com/forum/css-customization

    I would be interested in a solution for this, as I have an even number of child pages (4). Is it possible to have the grid with two or four columns? I assume this change will affect all subsequent grid pages?
    site link

    Hi there,

    The following custom CSS would place the child pages into four columns:

    .grid:nth-of-type(3n+3) {
    margin-right: 60px;
}

.grid:nth-of-type(4n+4) {
    margin-right: 0;
}

@media screen and (min-width: 1020px) {
.grid:nth-of-type(3n+1) {
    clear: none;
}

.grid {
    width: 180px;
}
}

@media screen and (min-width: 1230px) {
.grid {
    width: 230px;
}
}

    To add custom CSS, firstly set up a child theme or activate a custom CSS plugin.

    Enter the above snippet in either the editor for your CSS plugin or the style.css file of your child theme.

    If you’re fairly comfortable with CSS, you can also experiment with different widths using the above snippet as a template.

    Hope that’s helpful! If you have any further questions then please start a separate thread on this forums, as the original question on this post has been marked as resolved.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Centering even-number of child-pages’ is closed to new replies.