WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] How to increase gutter widths (4 posts)

  1. jimwelch
    Member
    Posted 1 year ago #

    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

  2. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    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.

  3. Skivsamlaren
    Member
    Posted 1 year ago #

    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.

  4. Copernicus
    Member
    Posted 1 year ago #

    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%; }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.