Remove space between columns

[fred79]

I'm trying to reduce the gap between columns on my homepage: http://www.commercialtruckquotes.com

There is an image in a two-thirds column and a form in the one-third column.

I'm using Agency and placed a featured page in the header slider spot to make this work.

I used columns because responsiveness is already baked in.

My problem is that there is too big of a horizontal gap between the image and the form.

I'd like to remove the gap and have the form and the image right next to each other. Any help would be greatly appreciated!

http://www.commercialtruckquotes.com

[fred79]

Here's the html I used for the columns:

<div class="two-thirds first"></div>
<div class="one-third last">[gravityform id="3" name="Home Page" title="false" description="false"]</div>

I tried using float left and a 65% with float right 35%. That worked a little better, but then the columns were not responsive.

I found this is in the CSS, but not sure what to tweak to remove the gaps between the columns;

/* Column Classes
------------------------------------------------------------ */

.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin: 0px 0px 0px;
padding-left: 3%;
}

.one-half,
.three-sixths,
.two-fourths {
width: 48%;
}

.one-third,
.two-sixths {
width: 35%;
}

.four-sixths,
.two-thirds {
width: 65%;
}

.one-fourth {
width: 22.5%;
}

.three-fourths {
width: 73.5%;
}

.one-fifth {
width: 17.4%;
}

.two-fifths {
width: 37.8%;
}

.three-fifths {
width: 58.2%;
}

.four-fifths {
width: 78.6%;
}

.one-sixth {
width: 14%;
}

.five-sixths {
width: 82%;
}

.first {
clear: both;
padding-left: 0;
}

[fred79]

For some weird reason, the columns aren't lining up now. The form is directly underneath the image. Yikes!

I've taken this off my homepage for now, But you can see what I'm talking about here: http://www.commercialtruckquotes.com/homepage/

Here's the HTML that I thought would work, but isnt:

<div class="two-thirds first">image</div>
<div class="one-third">gravity form shortcode</div>

Any ideas to get the form back on the same line as the image?

Many thanks!

[Author]

Posts