search

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
802 stars 907 forks source link

Inconsistent headings on different browsers #57

Closed jaranta closed 8 years ago

jaranta commented 8 years ago

I have a site based on an older version of Skinny Bones, but I didn't see anything in the commit log that would relate to this, so I'm guessing this issue would also happen on the current version.

One of my headings <h2> on the front page of my site is oddly centered when the site is loaded with Chrome (or Chromium), but works perfectly with Firefox. The browser-specific css goes way over my head, so I don't know where to look for solutions. The problem persists regardless of whether I build my site locally or on gh-pages.

You can see the problem by visiting http://jonne.arjoranta.fi/ with Chrome. Look for the second heading, Role-Playing.

mmistakes commented 8 years ago

The problem isn't isolated to a specific browser, it's actually something much simpler. Inside of the <div class="tiles"></div> elements the post tiles are all floated. What's happening is that second row with the Role Playing h2 isn't set to clear them.

One of the tiles is tall so it pushes over the tile. The easy solution is add something like this to the stylesheet to force headlines to clear any floats and drop down below the tiles properly.

float-collision

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  clear: both;
}

Or you could apply a the micro clearfix method to .tiles.

The problem is there in FF too it's just more forgiving so you don't notice the improperly cleared floats.

jaranta commented 8 years ago

Excellent. Thanks for your help! I chose the first option, since at least there I understand what is happening.