WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] Twenty Twelve why is my site so wide? (10 posts)

  1. galaxyk
    Member
    Posted 1 year ago #

    I thought my site was set to max-width 960 but it seems to be 1016 px wide in my browser. Any ideas how I can fix this?

    http://10hottestchristmastoys.com

    (I am using a child theme)

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  3. galaxyk
    Member
    Posted 1 year ago #

    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 ;)

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  5. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  6. galaxyk
    Member
    Posted 1 year ago #

    @ 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?

  7. galaxyk
    Member
    Posted 1 year ago #

    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?

  8. paulwpxp
    Font hero
    Posted 1 year ago #

    WP childtheme
    http://codex.wordpress.org/Child_Themes

    CSS box model
    http://reference.sitepoint.com/css/boxmodel

    Media queries
    https://developer.mozilla.org/en-US/docs/CSS/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.

  9. galaxyk
    Member
    Posted 1 year ago #

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

  10. galaxyk
    Member
    Posted 1 year ago #

    resolved

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic