Archived topic

Can I center multiple columns on a page?

7 replies · Started by Anonymous on May 20, 2015

Viewing posts 1–8 of 8

May 20, 2015 at 2:35 pm #109224

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,

May 20, 2015 at 10:07 pm #109256

How are you creating those columns?

May 20, 2015 at 11:19 pm #109271

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

May 21, 2015 at 9:40 am #109391

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.

May 21, 2015 at 10:07 am #109396

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.

May 21, 2015 at 10:28 am #109402

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

Thanks! :)

May 21, 2015 at 12:06 pm #109444

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

May 21, 2015 at 2:26 pm #109459

Awesome! :)

This archived topic is closed to new replies.

Start building better websites today.