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

Home Forums Support Can I center multiple columns on a page?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #109224
    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,

    #109256
    Roberto Enrique

    How are you creating those columns?

    #109271
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #109391
    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.

    #109396
    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.

    #109402
    Tom
    Lead Developer
    Lead Developer

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

    Thanks! 🙂

    #109444
    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

    #109459
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.