New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout css, Pages vs Home and Posts #86

Closed
davidenunes opened this Issue Sep 25, 2014 · 12 comments

Comments

Projects
None yet
3 participants
@davidenunes

davidenunes commented Sep 25, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 25, 2014

Owner

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.

Owner

mmistakes commented Sep 25, 2014

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

This comment has been minimized.

Show comment
Hide comment
@davidenunes

davidenunes Sep 25, 2014

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

davidenunes commented Sep 25, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 25, 2014

Owner

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.

Owner

mmistakes commented Sep 25, 2014

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.

@mmistakes mmistakes closed this Sep 25, 2014

@namebrandon

This comment has been minimized.

Show comment
Hide comment
@namebrandon

namebrandon Sep 30, 2014

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.

namebrandon commented Sep 30, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 30, 2014

Owner

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

Owner

mmistakes commented Sep 30, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@namebrandon

namebrandon Sep 30, 2014

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/

namebrandon commented Sep 30, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 30, 2014

Owner

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.

Owner

mmistakes commented Sep 30, 2014

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.

@mmistakes mmistakes reopened this Sep 30, 2014

@mmistakes mmistakes added the Type: Bug label Sep 30, 2014

@namebrandon

This comment has been minimized.

Show comment
Hide comment
@namebrandon

namebrandon Sep 30, 2014

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... :\

namebrandon commented Sep 30, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 30, 2014

Owner

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.

Owner

mmistakes commented Sep 30, 2014

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 mmistakes closed this in 3e4a2d9 Sep 30, 2014

mmistakes added a commit that referenced this issue Sep 30, 2014

Wrap all page content in #main div to fix #86
- Adjust article styles to correctly display post indexes
- Remove top margin from page titles
@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 30, 2014

Owner

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

Owner

mmistakes commented Sep 30, 2014

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

@namebrandon

This comment has been minimized.

Show comment
Hide comment
@namebrandon

namebrandon Sep 30, 2014

You are the man!! Thanks :)

namebrandon commented Sep 30, 2014

You are the man!! Thanks :)

@davidenunes

This comment has been minimized.

Show comment
Hide comment
@davidenunes

davidenunes Sep 30, 2014

Works like a charm, thanks! :)

davidenunes commented Sep 30, 2014

Works like a charm, thanks! :)

jokla added a commit to jokla/jokla.github.io that referenced this issue Dec 24, 2014

Wrap all page content in #main div to fix mmistakes#86
- Adjust article styles to correctly display post indexes
- Remove top margin from page titles

Manu343726 pushed a commit to Manu343726/Manu343726.github.io that referenced this issue Jun 30, 2015

Manu343726 pushed a commit to Manu343726/Manu343726.github.io that referenced this issue Jun 30, 2015

cjmadsen pushed a commit to cjmadsen/cjmadsen.github.io that referenced this issue Dec 7, 2016

cwigington3 pushed a commit to cwigington3/cwigington3.github.io---test that referenced this issue Jan 20, 2017

jluccisano added a commit to jluccisano/jluccisano.github.io that referenced this issue May 6, 2017

Wrap all page content in #main div to fix mmistakes#86
- Adjust article styles to correctly display post indexes
- Remove top margin from page titles

antonizoon pushed a commit to antonizoon/antonizoon.github.io that referenced this issue Jul 27, 2018

Wrap all page content in #main div to fix mmistakes#86
- Adjust article styles to correctly display post indexes
- Remove top margin from page titles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment