mmistakes / jekyll-theme-skinny-bones

A Jekyll starter with a variety of flexible layouts and components.
https://mmistakes.github.io/jekyll-theme-skinny-bones
MIT License
804 stars 907 forks source link

stray thin gray line in tile layout #59

Closed maxheld83 closed 8 years ago

maxheld83 commented 8 years ago

I made a tiled front page, somewhat like the home page on the gh-pages branch, like so (nevermind the content):


---
layout: media
permalink: /
title: Hi, I'm Max. This is what I'm working on.
share: false
image:
    feature: https://dl.dropboxusercontent.com/u/5341489/images/Max/max-board_CROP_SMALL.jpg
    credit: CiviCon Citizen Conference 2014
    creditlink: http://www.civicon.de

---

<div class="tiles">

<div class="tile">
  <h2 class="post-title">Deliberative Democracy</h2>
  <p class="post-excerpt">We can and should <em>reason</em> &#8212; not just vote &#8212; on matters of complex policy. I study how this might work (or not) at the <a href="http://www.civicon.de">CiviCon Citizen Conferences</a>.</p>
</div><!-- /.tile -->

<div class="tile">
  <h2 class="post-title">Optimal Taxation</h2>
  <p class="post-excerpt">What if there were fairer <em>and</em> more efficient taxes out there? In my <a href="http://www.maxheld.de/schumpermas">dissertation</a>, I investigate whether, and how, citizens might (dis)agree on these superior taxes.</p>
</div><!-- /.tile -->

<div class="tile">
  <h2 class="post-title">Q Methodology</h2>
  <p class="post-excerpt">We have <em>subjective</em> views, but we also share, generate and contrast these views with others. I contribute to the <a href="https://cran.r-project.org/web/packages/qmethod/index.html">qmethod R package</a> and I maintain the Q <a href="http://www.qmethod.org">website</a>.</p>
</div><!-- /.tile -->

<div class="tile">
  <h2 class="post-title">Computational Social Science</h2>
  <p class="post-excerpt">I (learn to) hack (and write) for <a href="http://janlo.de">Jan Lorenz's</a> <a href="http://gepris.dfg.de/gepris/projekt/265108307">DFG-funded</a> project on <a href="http://janlo.de/wp/research/">Opinion Dynamics and Collective Decisions</a>.</p>
</div><!-- /.tile -->

</div><!-- /.tiles -->

Oddly, then, there's a thin grey line on the right of the screen, I think the same line used to distinguish between the author information, and generally used in lieu auf ---.

Any idea how to get rid of this line? Is it my mistake?

line

maxheld83 commented 8 years ago

I should add, I took out the right panel (for ads) as per #58

mmistakes commented 8 years ago

Is this public somewhere? If not easiest way to figure out where that gray line is coming from is to inspect it with the browser's web developer tools. It'll show you what the element is and the CSS doing it so you can troubleshoot.

My guess is it's a <hr> and it needs to clear the floats. It should be knocking down below. Possible fix would be to add a clear to it in /_sass/_base.scss

hr {
    display: block;
    position: relative;
    clear: both;
    ...
}
maxheld83 commented 8 years ago

fantastic, thanks @mmistakes appending clear: both; to above css solves the problem.

Let me know if you want a PR for that (one-liner, after all).