[Resolved] Can I center multiple columns on a page?

[Stephen]

I am trying to create a team page, but when I add three team members, each one in a different column, there is always more space on the right side of the page than there is on the left. Is there a way I can center my columns as a group to the middle of the page, so that the first team member is the same distance from the left side of my page as the third team member is from the right side? Thank you,

[Roberto Enrique]

How are you creating those columns?

[Tom]

This is always a tough one.

What you would have to do is wrap your columns in a container, and then give that container a max-width.

Then, set the left and right margin to auto.

For example, your HTML:

<div class="team-container">
      Team columns
</div>

Then your CSS:

.team-container {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
}

[Stephen]

Roberto,
I am using shortcodes ultimate to create my columns.

Tom,
I tried using the div container as you provided as your example and also added the css within the css editor, but the columns still seem to be justified to the left side of my page.

[Roberto Enrique]

try this in the plain text editor:

<div class="grid-container">
  <div class="grid-33">
    <h1>I'm a 33,3333% Column</h1>
    <p>And here you have a lot of content, you know, just to fill up all this space there's a grid that is already integrated in generatepress and is not that difficult to use it.</p>
  </div>
  <div class="grid-33">
    <h1>I'm a 33,3333% Column</h1>
    <p>And here you have a lot of content, you know, just to fill up all this space there's a grid that is already integrated in generatepress and is not that difficult to use it.</p>
  </div>
  <div class="grid-33">
    <h1>I'm a 33,3333% Column</h1>
    <p>And here you have a lot of content, you know, just to fill up all this space there's a grid that is already integrated in generatepress and is not that difficult to use it.</p>
  </div>
</div>

And let me know if it works for you.

[Tom]

Can you link me to your site so I can take a look at the code?

Thanks! 🙂

[Stephen]

Robert,
Thank for your help. Your way did work.

Tom,
Here is a link to my website Pacific Hydrotech.
I tried your newly released Lightweight Grid Columns, and it worked perfectly.
Thank you for all of your help.
Stephen

[Tom]

Awesome! 🙂

[Author]

Posts