How can I fix my columns to stretch equally across the page?

I'm trying to makes the columns under "Our Clinic" on the homepage equal sizing but they are a little more narrow than they should be which makes them float too much to the left. Site examples for this theme are partner.mlportal.com and drtanzar.com.

Thanks in advance for your help! I just can't figure out what pesky code is making these columns smaller. XP

  • Michelle Shull

    Hey there, Brandon!

    I've played with your site a bunch, and here are some ideas to make it look a little cleaner.

    For your Google map, I was able to center it and adjust it a little:

    .su-gmap {
    margin-bottom: 1.5em;
    margin-right: auto;
    margin-left: auto;
    height: 90%;
    width: 90%;
    }

    And this will make your buttons a bit more narrow, and center them:

    .su-botton-center {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    }

    The other thing I want you to try is doing a little trickery with the widths of each of those columns. Right now, each is at 32%, try doing it like so, from left to right:
    32%
    34%
    34%

    The longest line of the furthest left column is shorter than the shortest line of the second column, so it looks off balance. I think adjusting those widths will even it out more for you, with the other CSS changes.

    Thanks for coming by chat!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.