Support » Fixing WordPress » Increase Gutter Between Content and Sidebar

  • I’m having a heck of a time with the gutter between my content and sidebar. It’s too narrow and as much as I try to change the percentages, nothing is budging it. My site is Red Door Review.

    I want the sidebar to move a smidge to the right.

    Here’s the code in my child theme (for TwentyTwelve) that I believe needs to be adjusted:

    #primary {
    	float: left;
    	margin: 0 10 0 0;
    	width: 65%;
    }
    #content {
    	margin: 0 31.4% 2 2%;
    }
    #secondary {
    	float: right;
    	margin-right: 2%;
    	width: 31.4%;
    }

    Any suggestions?

Viewing 15 replies - 1 through 15 (of 16 total)
  • When we work on CSS for sites we first discover the CSS for an element in use through tools such as Firebug, IE9+ F12 developer tools or Chrome Inpsect Element. Once we are sure what the styles we need to affect actually are, we can add them to the bottom of our stylesheet (not recommended as this edit will be lost on theme update)…Use them in a Child Theme (good option) or use a Custom CSS plugin (prefer not to use plugins unless needed)…

    Now that all said, we see that the sidebar issue is related to not assigning a unit (pixel, percent, etc.) to the 10 in the margin:

    try:

    #primary {
    	float: left;
    	margin: 0 10px 0 0;
    	width: 65%;
    }

    Also grab a piece of paper, sketch your sidebar rectangle, your content rectangle, and each associated margin and then do some math…it is really just that…math and proper code…

    Try setting the width of the #primary to 60%. But one thing to be aware of is the mobile first nature of twentytwelve – so when you make changes to the CSS code, if you only want the change to affect larger screens, you need to wrap that CSS in a media query. As is, your site isn’t resizing very well – so you might want to look at what you’ve already changed in the Child Theme CSS.

    Thread Starter adlawrence

    (@adlawrence)

    Thanks, WPyogi. I changed the primary to 60%, but it didn’t make a noticeable difference: Red Door Review [Edit: My bad, I refreshed and it changed. Thank you!]

    Hmm, I thought I fixed the sizing problems when I deleted a plugin. I’m not seeing any problems on my Android smart phone or when I change Chrome’s width/height on my laptop. What browser/platform are you using? (I’m using a Mac.)

    Argh, my bad, the very thing I was talking about is why that did not show up – you need to wrap those in a media query!

    /* Minimum width of 600 pixels. */
    @media screen and (min-width: 600px) {
    #primary {
    	float: left;
    	margin: 0 10 0 0;
    	width: 50%;
    }
    #content {
    	margin: 0 31.4% 1.8 1.8%;
    }
    #secondary {
    	float: right;
    	margin-right: 1.8%;
    	width: 31.4%;
    }
    }

    That does make the small screen work the way it’s intended to – the sidebar below the content – I’m just resizing a desktop browser.

    Thread Starter adlawrence

    (@adlawrence)

    Oh … Thanks! I’ll give this a try.

    The 2 in margin for #content needs a unit also, only zero can be unitless…

    Thread Starter adlawrence

    (@adlawrence)

    Thanks, WPyogi. This is looking a lot better.

    There’s one thing, I still want to move the sidebar to the right a little more. I’d like the outer edge of the large ads to line up under the light grey bars around the navbar. Any ideas on how I could move it over?

    Thread Starter adlawrence

    (@adlawrence)

    Thanks, Seacoast Web Design. With your help, I fixed that and in #primary.

    Thread Starter adlawrence

    (@adlawrence)

    Woah. That broke the page. Ooo! That must be my problem.

    Thread Starter adlawrence

    (@adlawrence)

    Help! It’s all messed up now. Oh no…

    Red Door Review

    It’s a bit tricky when you are changing widths – because an element or more than one cannot be bigger than the space in the containing element – or the layout will break! So if you make one part wider, you’ll need to make another narrower.

    Thread Starter adlawrence

    (@adlawrence)

    Agreed. Everything must add up to 100 or less.

    /* Minimum width of 600 pixels. */
    @media screen and (min-width: 600px) {
    #primary {
    	float: left;
    	margin: 0 0 0 0;
    	width: 61%;
    }
    #content {
    	margin: 0 31.4% 1.8% 1.8%;
    }
    #secondary {
    	float: right;
    	margin-right: 1.8%;
    	width: 31.4%;
    }
    }

    61 + 31.4 + 1.8 + 1.8 = 96

    But it’s still broken. The content is now smooched to the left and the darn sidebar isn’t moving to the right at all.

    I do not see that the site is ‘broken’ – I do still see the same error I first noted which when fixed begins to help…I also removed the width on on of the side my side divs and one then fills in the gap…

    Looks okay now? The width of the whole page is also being controlled by the padding in this CSS – first section.

    body .site {
        box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
        margin-bottom: 3.42857rem;
        margin-top: 3.42857rem;
        padding: 0 2.85714rem;
    }
    .site {
        margin: 0 auto;
        max-width: 68.5714rem;
        overflow: hidden;
    }

    Formatting errors in CSS can make for a long night…the W3 CSS Validation Service is good for exposing them…(don’t confuse outright errors with non-conformance issues)

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Increase Gutter Between Content and Sidebar’ is closed to new replies.