{"action":"created","issue":{"url":"https://api.github.com/repos/mmistakes/skinny-bones-jekyll/issues/57","repository_url":"https://api.github.com/repos/mmistakes/skinny-bones-jekyll","labels_url":"https://api.github.com/repos/mmistakes/skinny-bones-jekyll/issues/57/labels{/name}","comments_url":"https://api.github.com/repos/mmistakes/skinny-bones-jekyll/issues/57/comments","events_url":"https://api.github.com/repos/mmistakes/skinny-bones-jekyll/issues/57/events","html_url":"https://github.com/mmistakes/skinny-bones-jekyll/issues/57","id":134878725,"number":57,"title":"Inconsistent headings on different browsers","user":{"login":"gitkrax","id":5079912,"avatar_url":"https://avatars.githubusercontent.com/u/5079912?v=3","gravatar_id":"","url":"https://api.github.com/users/gitkrax","html_url":"https://github.com/gitkrax","followers_url":"https://api.github.com/users/gitkrax/followers","following_url":"https://api.github.com/users/gitkrax/following{/other_user}","gists_url":"https://api.github.com/users/gitkrax/gists{/gist_id}","starred_url":"https://api.github.com/users/gitkrax/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gitkrax/subscriptions","organizations_url":"https://api.github.com/users/gitkrax/orgs","repos_url":"https://api.github.com/users/gitkrax/repos","events_url":"https://api.github.com/users/gitkrax/events{/privacy}","received_events_url":"https://api.github.com/users/gitkrax/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-02-19T14:29:51Z","updated_at":"2016-02-19T15:47:30Z","closed_at":null,"body":"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.\r\n\r\nOne 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.\r\n\r\nYou can see the problem by visiting http://jonne.arjoranta.fi/ with Chrome. Look for the second heading, Role-Playing."},"comment":{"url":"https://api.github.com/repos/mmistakes/skinny-bones-jekyll/issues/comments/186268477","html_url":"https://github.com/mmistakes/skinny-bones-jekyll/issues/57#issuecomment-186268477","issue_url":"https://api.github.com/repos/mmistakes/skinny-bones-jekyll/issues/57","id":186268477,"user":{"login":"mmistakes","id":1376749,"avatar_url":"https://avatars.githubusercontent.com/u/1376749?v=3","gravatar_id":"","url":"https://api.github.com/users/mmistakes","html_url":"https://github.com/mmistakes","followers_url":"https://api.github.com/users/mmistakes/followers","following_url":"https://api.github.com/users/mmistakes/following{/other_user}","gists_url":"https://api.github.com/users/mmistakes/gists{/gist_id}","starred_url":"https://api.github.com/users/mmistakes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mmistakes/subscriptions","organizations_url":"https://api.github.com/users/mmistakes/orgs","repos_url":"https://api.github.com/users/mmistakes/repos","events_url":"https://api.github.com/users/mmistakes/events{/privacy}","received_events_url":"https://api.github.com/users/mmistakes/received_events","type":"User","site_admin":false},"created_at":"2016-02-19T15:47:30Z","updated_at":"2016-02-19T15:47:30Z","body":"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.\r\n\r\nOne 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.\r\n\r\n![float-collision](https://cloud.githubusercontent.com/assets/1376749/13180277/c6720932-d6f5-11e5-9dbd-e3cc90ff2e8f.jpg)\r\n\r\n``` css\r\n.page-content h1,\r\n.page-content h2,\r\n.page-content h3,\r\n.page-content h4,\r\n.page-content h5,\r\n.page-content h6 {\r\n  clear: both;\r\n}\r\n```\r\n\r\nOr you could apply a the [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) method to `.tiles`.\r\n\r\nThe problem is there in FF too it's just more forgiving so you don't notice the improperly cleared floats."}}