Support » Theme: Twenty Twelve » Twenty Twelve why is my site so wide?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The width is set here:

    .site {
        margin: 0 auto;
        max-width: 68.5714rem;
        overflow: hidden;

    If you are using a browser that does not support rem units, that may be the problem.

    Is there a reason you have the entire stylesheet copied into your child theme?

    When I look at that section in my theme editor, it says:

    .site {
    		margin: 0 auto;
    		max-width: 960px;
    		max-width: 68.571428571rem;
    		overflow: hidden;

    Wouldn’t that deal with the rem issue? (I use Firefox 18.0.1)

    I have the entire stylesheet so I can experiment and try to figure out for myself how to change things … but it didn’t work in this case 😉

    Duplicating the stylesheet makes things much harder to keep track of changes you have made — and slows down the loading of CSS. Try downloading and using Firebug to work with CSS.

    Per the above, try putting the px line below the rem line – or just remove the rem line. CSS is read top-down so Firefox is using the rem line. In fact, if you use Firebug to look at the CSS, the px line does not even appear.

    It’s the padding that you added that causes this.

    The CSS box model add padding to the overall width too, unless you tell it otherwise ( box-sizing ).

    Also, 2012 is mobile first, notice your sidebar’s width in small screen, there is a problem from not assigning the changes according to the media queries.

    @ WPyogi, I have removed that rem line but it doesn’t seem to make a difference.

    @paulwp, I thought I had been reducing padding, not adding it … and then I don’t understand any of the rest of your message 🙁

    Is this theme only suitable for experts really? Should I be working with a simpler theme?

    I liked the idea that it would work with mobile devices, but if that means I can’t edit it, perhaps it’s not worth it?

    in other words … if I start over with a new child theme and use the import function for CSS, am I still going to have a problem because I don’t understand media queries?

    WP childtheme

    CSS box model

    Media queries

    In your childtheme’s css, you should not duplicate the parent’s css and work directly on it, as WPyogi said, it’s harder to keep track, you only need the first line like this and then below that just repeat (override) only css that you want changed.

    @import url("../twentytwelve/style.css");

    The thing about 2012 is that it’s mobile first, any changes must be assigned according to it. Study the parent’s CSS down below the media queries bit until you understand what’s doing what, then make changes in childtheme.

    You do not need to change theme if all you want is just a basic blog look like that, just review the links above and ask question in the forum whenever you are stuck, people can help.

    OK many thanks I will read those links. I am sure I can master it and it will be worth getting it right.


Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Twenty Twelve why is my site so wide?’ is closed to new replies.