WordPress.org

Support

Support » Themes and Templates » Quark » [Resolved] How to increase gutter widths

[Resolved] 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

    @ahortin

    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%; }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] How to increase gutter widths’ is closed to new replies.
Skip to toolbar