Title: How to increase gutter widths
Last modified: August 21, 2016

---

# How to increase gutter widths

 *  Resolved [jimwelch](https://wordpress.org/support/users/jimwelch/)
 * (@jimwelch)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/how-to-increase-gutter-widths/)
 * Hi Anthony. Thanks for the great theme!
 * I have two questions I hope you can help with.
    1. I’d like to decrease the default
   containing width of 1200px to 980px. Is this as simple as doing a find/replace
   in style.css for the max-width property? Or, would this cause problems?
 * 2. I’d like to increase the width of the gutters. I assume I’d increase margin-
   left property on .col from 1.6% to something greater in the grid.css file? And
   then do the math to adjust the twelve column grid width values? Any shortcuts/
   tips for figuring the adjusted column widths?
 * Thanks!
    Jim

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Theme Author [Anthony Hortin](https://wordpress.org/support/users/ahortin/)
 * (@ahortin)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/how-to-increase-gutter-widths/#post-3833824)
 * 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.
 *  [Skivsamlaren](https://wordpress.org/support/users/skivsamlaren/)
 * (@skivsamlaren)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/how-to-increase-gutter-widths/#post-3834126)
 * **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](http://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.
 *  [Copernicus](https://wordpress.org/support/users/copernicus/)
 * (@copernicus)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/how-to-increase-gutter-widths/#post-3834149)
 * 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%; }
       ```
   

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘How to increase gutter widths’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/quark/1.4.1/screenshot.png)
 * Quark
 * [Support Threads](https://wordpress.org/support/theme/quark/)
 * [Active Topics](https://wordpress.org/support/theme/quark/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/quark/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/quark/reviews/)

 * 3 replies
 * 4 participants
 * Last reply from: [Copernicus](https://wordpress.org/support/users/copernicus/)
 * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/how-to-increase-gutter-widths/#post-3834149)
 * Status: resolved