Center module

Home Forums Automattic Forefront Center module


Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #107710 Resolve

    Ed. Puerto Rico

    I would like to center the three modules that are shown at the bottom of this page:

    These come from the Grid view page attribute.

    Does anyone know how I could go about doing this through CSS? I have custom design installed.

    The blog I need help with is


    Hi there,

    Are you referring to the the 3 items on this page?

    Give this CSS a try:

    .content-area.full-width {
    padding: 72px;

    Let me know how this works for you.


    Ed. Puerto Rico

    Hi michiecat and thanks :)

    I applied the CSS but it doesn’t seem to center the 3 items:



    Sorry about that. Forefront is designed to display 4 items in the grid. Since you have 3 items, that’s why it looks like it’s not centered. If you don’t have a 4th item to add, please delete the previous CSS I gave you and replace it with this:

    @media (min-width: 900px) {
    .site-content .child-pages {
    padding-left: 95px;

    This code is wrapped in a Media Query so that the centering will only occur on screens at least 900px wide. I did this because that’ll help it still look nice as you re-size the screen for mobile devices.

    Adjust the “95px” to suit your liking. Let me know if you run into any problems with this code.


    Ed. Puerto Rico

    It works perfectly, michiecat. Thanks a bunch!



    You’re welcome, I’m glad it worked! I’ll close this topic and mark it as resolved. As always, feel free to start a new topic if you have other questions.

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

The topic ‘Center module’ is closed to new replies.