Layout css, Pages vs Home and Posts

[davidenunes]

The css for the page "main" div makes so that there is some extra space between the page content and the "bio sidebar" and the navigation menu. This is not consistent with the home and post-index layout.

PS: I've been playing around with your theme, and it is great by the way, good job.

[mmistakes]

Not sure I'm following. Can you provide a screenshot exactly where the spacing differences are?

There are margins and padding on headlines and the feature image blocks. If you don't have a feature image that would explain why the spacing is off.

[davidenunes]

That was it, if you remove the images (wich I did) both in home and in a page, the spacing is a bit off.

[mmistakes]

In that case you can apply a margin-top: 0; to the h1 element and it should be flush with the top of the sidebar. Then add some margin-bottom to the nav if you want more space between the two.

[namebrandon]

I'm running into this same issue.. would either of you mind clarifying, please? We're talking about page.scss here? I see a line ~299 where h1,h2 are defined, but adding in margin-top: 0; doesn't resolve the issue. There's still that sidebar 'jump', when moving between the 'about' page and the rest of the site.

[mmistakes]

@namebrandon Attach a screenshot and indicate which area you're talking about. I'm still not entirely sure we're all talking about the same thing. Sidebar jumping around could me a lot of things.

As stated a few comments above, there is some margin on the top of each headline element. If you zero that out it will be flush with the top of the sidebar's top.

There also is some margin-bottom applied to the .image-wrap that contains the feature image. If you don't have a feature image on a page/post that extra margin won't exist and the main content and sidebar will obviously jump up higher on the page.

When in doubt fire up Chrome/Safari's web developer tools or Firebug in Firefox and start inspecting elements. It'll show you the CSS being applied and you can play around with edits to figure out where the extra margin and padding is coming from.

[namebrandon]

Thanks Michael! You can see the site live here, notice the sidebar jump when switching from about, to the other types of pages.

http://brandonharris.io/

[mmistakes]

I see the problem. The post and page layouts both wrap the main content and sidebar with <div id="main" role="main">, which has a margin-top: 1em;. The post-index.html layout doesn't have the #main wrapper so the 1em of extra space isn't there.

Wrapping the sidebar and index content with <div id="main" role="main"> won't solve the problem directly because a bunch of other styles are introduced that screw with the post list. I never noticed it because I used images up top. Maybe someday I'll get around to fixing that but for now you'll have to get creative.

[namebrandon]

Would adding a transparent / white png as a feature image of a certain heigh solve the issue? I'm afraid that's about as creative as I am with html/css... :\

[mmistakes]

That probably won't work all that great because the transparent png's size will be in pixels and the margin on the other pages is set in ems, which could change depending a user's browser settings.

The better solution is adding the #main div on the post index page, a class to the article containers, and moving a few styles around.

[mmistakes]

@namebrandon and @davidelnunes Here are the changes I made to fix the 'jumpy' sidebar. 99d4eee

[namebrandon]

You are the man!! Thanks :)

[davidenunes]

Works like a charm, thanks! :)