WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Smashed Navbar and H1 (11 posts)

  1. adlawrence
    Member
    Posted 1 year ago #

    I needed to widen the sidebar on this site: http://scottfishercarpentry.com and when I added this code (in this child theme: http://scottfishercarpentry.com/wp-content/themes/twentytwelvechild/style.css ):

    #primary {
    	float: left;
    	margin: 0 -33.9% 0 0;
    	width: 100%;
    }
    #content {
    	margin: 0 34% 0 3.9%;
    	width: 58.4%;
    }
    #secondary {
    	float: right;
    	margin-right: 3.9%;
    	width: 30%;
    }

    It widened the sidebar, but also smashed the bottom of the navbar and the top of the text on the page. I've tried changing all of the margins and haven't found the correct one to modify.

    Suggestions?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    How wide do you want the sidebar?

  3. adlawrence
    Member
    Posted 1 year ago #

    Wide enough to not break the email address, so I went with something that would fit a 300px Google ad.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    What do you mean "smashes the bottom of nav bar and the top of the text"?
    Why does your primary div have a width of 100%?

  5. adlawrence
    Member
    Posted 1 year ago #

    Thanks for helping me, Andrew.

    What do you mean "smashes the bottom of nav bar and the top of the text"?

    Here's a screenshot showing what I see: http://s7.postimage.org/cxgmkvxl7/Screen_shot_2012_12_20_at_3_19_05_PM.png

    The spacing is too tight between the navbar and title of the page (Home, Porches, and so on).

    Why does your primary div have a width of 100%?

    If the width is less than 100%, then the main block of text (and any images) doesn't fit in its space.

    If you click on this link now, you'll see the primary div with 50% width.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your smashed appearance is due to your minus margin top values on #primary.

    You shouldn't have a width of 100% on your primary div, as you need to have a floating div next to it. You can resolve this, "doesn't fit in its space" issue by removing the width you've applied to #content.

  7. adlawrence
    Member
    Posted 1 year ago #

    I've removed width: 58.4%; from content and it broke the page. Here's how: http://scottfishercarpentry.com

    How was that supposed to change the spacing above "Home" and below the navbar?

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    I've removed width: 58.4%;

    Now you can add a proper width other than 100% to #primary.

    How was that supposed to change the spacing above "Home" and below the navbar?

    That wasn't. I mentioned the minus margin top affects it.

  9. adlawrence
    Member
    Posted 1 year ago #

    Now you can add a proper width other than 100% to #primary.

    Ah. I see. Thanks, that's now a more reasonable 64%.

    That wasn't. I mentioned the minus margin top affects it.

    Ha! I changed that one to 10 and now it's all better. Thank you!

  10. adlawrence
    Member
    Posted 1 year ago #

    This is to close the topic. Thanks again, Andrew.

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    That's okay adlawrence.

Topic Closed

This topic has been closed to new replies.

About this Topic