Need help? Check out our Support site, then


Twenty Twelve CSS: Not sure why margins changed

  1. After I loaded a new header image and added code to center the navigation bar and page titles, the post/page margins on the whole site changed. Not sure what happened.

    ladysmantlestudio.com

    Thanks in advance for any clarification on this.

    The blog I need help with is ladysmantlestudio.com.

  2. The issue you are having seems to come from the style.css file at around line 168. Just delete the line that says "padding: 0" and you're good to go :)

  3. @ladydmg, I found that if you set the background color at the bottom of the Appearance → Background page to anything other than white or default, it goes back to normal. I'm not sure it's a bug (or if it's an important one) since it's an odd combination of events that triggers it. Try just adding a background color—it's the fallback color for when the background image doesn't load, so choosing a color similar to the colors in your background image would be nice.

    @marianojmiguel, just to clarify, WordPress.com users don't have rights to delete lines from theme stylesheets directly, rather they can add rules to override things on the Appearance → Custom Design → CSS editor page. See http://en.support.wordpress.com/custom-design/editing-css/ if you're interested in learning more about how it works over here. :)

  4. @designsimply, you are the best! Thank you. I tried all sorts of things... never would have even considered this. Whether this would be considered a bug or not, I don't know, but it's sure frustrating when something like this happens but the fix doesn't follow any logic (that I know of anyway). In any case, again, I thank you immensely!

    Now, three more CSS questions if you don't mind:

    1) I would like the margins on all the one-column pages to be a little deeper (more blank space between the text and the edge of the post/page). How do I do that in CSS?

    2) I would like to change the background color of the post/pages to something a little more off-white. Haven't found the right color yet, but when I do, how do I add that to the CSS?

    3) How would I move the nav bar beneath the header? Not sure I want to do that permanently, but I'd like to see what it would look like.

    Again, thanks in advance.

  5. I don't know, but it's sure frustrating when something like this happens but the fix doesn't follow any logic (that I know of anyway). In any case, again, I thank you immensely!

    This was a pretty suuuuper rare case.

    For the other stuff, could you pretty please post separate help requests as separate forum topics at http://en.forums.wordpress.com/forum/css-customization/#postform in the future? It makes it easier to keep track of them if any back and forth replies need to happen, and it's also better when searching through the forums later if each request/solution is in its own thread. Make them have good topic titles too!

  6. 1) I would like the margins on all the one-column pages to be a little deeper (more blank space between the text and the edge of the post/page). How do I do that in CSS?

    Always please include an example link. Here's one of a one-column page I just found on your blog:
    http://ladysmantlestudio.com/alterations-restyling/

    The margins for the main container in the Twenty Twelve theme are set like this:

    body .site {
    	padding: 0 40px;
    	padding: 0 2.857142857rem;
    }

    So here is an example of expanding them:

    body .site {
    	padding: 0 68px;
    	padding: 0 4.857142857rem;
    }
  7. 2) I would like to change the background color of the post/pages to something a little more off-white. Haven't found the right color yet, but when I do, how do I add that to the CSS?

    Here is an example:

    .site {
    	background-color: #D3CDBD;
    }

    Try this site for picking color shades:
    http://0to255.com/

  8. 3) How would I move the nav bar beneath the header? Not sure I want to do that permanently, but I'd like to see what it would look like.

    Try this:

    #masthead {
    	position: relative;
    	padding-bottom: 50px;
    }
    #site-navigation {
    	position: absolute;
    	top: 290px;
    }

    Adjust the numbers as needed.

  9. @designsimply Thank you, I'm new on the WordPress.com forums and looking forward to help out some people so I'll check that out :) Not sure about what the problem is, but there seems to be an issue with the classes that are applied to the body tag. Anyway, I guess the issue is already solved :)

  10. @designsimply
    All of this works wonderfully. Thank you. And sorry about the multiple questions... first time posting to this forum. I will post single questions in the future.

    However, I do have a followup question on the margins issue... which I'm going to post here only because it seems confusing to start another request on that at this point.

    I would like to move the text margins on individual post/pages only. In other words, I would like the header and navbar to stay as wide as they are, and only adjust the margins of the post/pages. Perhaps that's not possible on this theme, but that's what I was talking about. Is there a way to do that? Sorry if I wasn't as clear as I could have been on that.

    You can use the same example page as before:
    http://ladysmantlestudio.com/alterations-restyling/

    Also, thank you for the color picker site... nice, easy-to-use resource.

  11. On second thought... I am changing over to the Forever theme. But again, @designsimply, thank you for your help with TwentyTwelve.

    FYI - I search this forum regularly for answers to my questions, and it is always your simple, straightforward responses that stand out as the ones which end up solving the issue. You chose your username well ;)

Topic Closed

This topic has been closed to new replies.

About this Topic