How to increase gutter widths

Hi Jim,

Thanks! And yep, you’re exactly right for Q1. You can just do a search/replace in style.css for 1200px and replace with 980px.

In regards to your second question, that’s certainly one option you could do. As you’ve realised though, you’d then need to do the math to adjust the other values.

If you’re simply trying to add some extra space between the sidebar and your main content area, the other thing you could do is simply add some padding-left or margin-left to the .widget-area class. That would give you a little more room on the left of your sidebar. ie.

.widget-area { margin-left: 40px; }

Hope this helps.

Regarding 2.

Maybe it’ll help someone – here’s the grid css I use for a 4% gutter:

.col {
margin: 0 0 0 4.0%;
}

.grid_12_of_12 { width: 100%; }
.grid_11_of_12 { width: 91.15%; }
.grid_10_of_12 { width: 82.5%; }
.grid_9_of_12  { width: 73.85%; }
.grid_8_of_12  { width: 65.2%; }
.grid_7_of_12  { width: 56.55%; }
.grid_6_of_12  { width: 47.9%; }
.grid_5_of_12  { width: 39.25%; }
.grid_4_of_12  { width: 30.6%; }
.grid_3_of_12  { width: 21.95%; }
.grid_2_of_12  { width: 13.3%; }
.grid_1_of_12  { width: 4.65%; }

I believe that should work fine.

I’m really an idiot when it comes to math, so if someone like minded wants to use their own gutter-width, here’s an feeble attempt at showing my work.. (Well mostly someone elses work, see onepcssgrid.mattimling.com)

I wanted 4% gutter/margin.

For 12 columns I need 11 margins. 4 x 11 = 44%.

To get the percent of one column I took the remaining 56% / 12 = 4.66. And for my own amusement I rounded it down to 4.65%.

So grid_1 is 4.65%. And grid_2 is that value doubled, plus one gutter, ie:
(4.65 x 2) + 4 = 13.3 (grid_2_of_12)

Then you can continue adding 8.65 to each level, and Bob should be your uncle in no time.

I’m terrible with math as well; but here’s a breakdown for anyone interested in 5% column widths:

/* 5% Column Width */

.col {
margin: 0 0 0 5.0%;
}

.grid_12_of_12 { width: 100%; }
.grid_11_of_12 { width: 91.25%; }
.grid_10_of_12 { width: 82.5%; }
.grid_9_of_12  { width: 73.75%; }
.grid_8_of_12  { width: 65%; }
.grid_7_of_12  { width: 56.25%; }
.grid_6_of_12  { width: 47.5%; }
.grid_5_of_12  { width: 38.75%; }
.grid_4_of_12  { width: 30%; }
.grid_3_of_12  { width: 21.25%; }
.grid_2_of_12  { width: 12.5%; }
.grid_1_of_12  { width: 3.75%; }