Need help? Check out our Support site, then


CHUNK Theme content width

  1. Hi there! I have two questions, both relating to content width: I have adjusted the content width to 960 pixels overall, but somehow it doesn't seem to work. I've added the following code to my CSS:

    html body.page div#container div#contents div#post div.main {<br /> width: 960px;<br /> }

    1) On static pages, the content still shows only 600 pixels wide;
    2) The same is true for my blog (http://annarojahn.com/blog-the-foundress/), plus the blog navigation seems to have slipped outside the content area to the left.

    I'm pretty much a CSS beginner, so any help would be greatly appreciated!

    The blog I need help with is annarojahn.com.

  2. I checked your CSS and I found that you have added the following two rules in your custom CSS editor:

    #container #contents .hentry .main {
    	width: 960px;
    }
    #container #contents .format-standard.hentry .main {
    	width: 580px!important;
    }

    Those rules both target the same area of the page depending on how the content is read into the page (the one with ".hentry" in the middle targets normal posts, and the one with ".format-standard.hentry" targets posts that are using the standard post format, which most or all of yours are). Each content area in a website design structure usually gets a specific class, such as "format-standard" that's shown in your example CSS above.

    What you'll want to do next is learn more about how CSS specificity works. How specific a rule is will determine which rule is used if a number of rules apply to a given element. You've included "!important" in your CSS, and that is an add-on to the CSS rule that tries to override most other rules. While it is appropriate to use "!important" sometimes, the problem with using it too much is that using it and trying to figure out specificity can start to get very confusing and very messy very fast. So a general rule is to leave it out if at all possible and only use it if it is absolutely necessary. In this case, it isn't needed.

    One way to determine what selector to use when trying to adjust width is to look at the theme CSS itself to see what the original theme has and use that exact same string in the Appearance → Custom Design → CSS editor to override it. For example, try removing both of the rules I listed above from your CSS editor and add this instead:

    .hentry .main {
    	width: 680px;
    }

    That will make the content width area of posts on the home page wider. Then, to target the width of pages themselves (where the ".main" area should be different than it is for home pages or posts), add this:

    .page .hentry .main {
    	width: 940px;
    }

    Adding ".page" to the front means it just updates the width for pages.

    Sometimes, to visualize exactly what selectors cover what areas, I'll add a temporary red border just so I can see where things are. You can do this by adding something like the following to your CSS editor, clicking the preview button, and then browsing to a page:

    .page .hentry .main {
    	border: 1px solid red;
    }

    Last, if you're interested in learning more about specificity, check out the following links:
    http://www.htmldog.com/guides/cssadvanced/specificity/
    http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

  3. Super, thank you very much, designsimply! I also got a friend to lend me a hand with this yesterday, so: problem solved :)

    Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic