Minimal Mistakes: Comments box covers up blog posts

Hello! I’m converting my Jekyll blog from Minima over to Minimal Mistakes and I’m having a weird problem. Since enabling comments, on posts where there are no comments, the Add Comment form reaches up and covers the entire blog post.

This doesn’t happen on posts where I have at least one comment, but I’m having the damnedest time figuring out what’s causing this in the CSS & HTML. Part of me thinks there must be an element up at the top of the post that’s somehow being included in the form, but the inspectors in Chrome and Firefox reveal nothing.

Here’s something else that’s weird. On posts where there is at least one comment, the bounding box for the <h2>Comments</h2> header extends to the top of the screen. This has no ill effects, it’s just weird. It’s a lone h2 element with no children, not even pseudo-elements. Nothing weird has been done to it in the CSS–its height and position are untouched.

Another weirdness: If I go in the inspector and delete all the elements in the comments form, the comments form snaps to the top of the article. Looking at the elements and their parents in the inspector, I can’t figure out what’s causing that.

My repository is here. Can anyone help me figure out what’s going on?

I think it has to do with whatever customizations you made to the Staticman comment form. The HTML and CSS classes you’re using is different from what is bundled with the theme.

My guess there’s something screwy in there with the HTML and/or CSS. Any particular reason you didn’t use the included Staticman include?

1 Like

I thought I had stripped out all the customizations I’d made, but that must not have been the case. After posting this I decided to try copying all my content into a fresh repo using the Minimal Mistakes starter template; that’s working really well. Thanks for looking at this, anyway. :slight_smile: