utgdkyzkiz
New Member
I'm styling a blog run on Jekyll (-v 0.12.1) and running into a problem where measuring the window size of index.html is 1103px and then the same unchanged window on a post page would measure 1088px (using XScope). This is causing the header logo to "shift" a few pixels from page to page, and I can't for the life of me figure out why- except that setting a margin/width would reduce the window measurement on the post page (but not on the index).
post.html\[code\]---layout: default---<section class="post"> <div class="container"> <article class="centered"> <header class="post-header"> <div class="post-meta">{{ page.date | date: "%b %d, %Y" }}</div> <h1 class="post-title"> <a href="http://stackoverflow.com/questions/15796286/{{ page.url }}">{{ page.title }}</a> </h1> </header> <div class="post-body"> {{ content }} </div> </article> </div></section>\[/code\]post css\[code\].post { margin-top: 2rem; .post-header { margin-bottom: 2rem; .post-meta { margin-bottom: 0.3rem; font-family: $font-family-sans; color: $light-text-color; font-weight: 300; text-align: center; font-size: 0.8rem; text-transform: uppercase; } .post-title { @extend .beta; @extend %hN; font-family: "proxima-nova-alt-ext-cond", sans-serif; text-transform: uppercase; text-align: center; } }} .container { width: 85%; margin-left: auto; margin-right: auto; max-width: 63em;}.centered { max-width: 31rem; width: 80%; margin: 0 auto; display: block;}\[/code\]
post.html\[code\]---layout: default---<section class="post"> <div class="container"> <article class="centered"> <header class="post-header"> <div class="post-meta">{{ page.date | date: "%b %d, %Y" }}</div> <h1 class="post-title"> <a href="http://stackoverflow.com/questions/15796286/{{ page.url }}">{{ page.title }}</a> </h1> </header> <div class="post-body"> {{ content }} </div> </article> </div></section>\[/code\]post css\[code\].post { margin-top: 2rem; .post-header { margin-bottom: 2rem; .post-meta { margin-bottom: 0.3rem; font-family: $font-family-sans; color: $light-text-color; font-weight: 300; text-align: center; font-size: 0.8rem; text-transform: uppercase; } .post-title { @extend .beta; @extend %hN; font-family: "proxima-nova-alt-ext-cond", sans-serif; text-transform: uppercase; text-align: center; } }} .container { width: 85%; margin-left: auto; margin-right: auto; max-width: 63em;}.centered { max-width: 31rem; width: 80%; margin: 0 auto; display: block;}\[/code\]