Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
The horizontal rule has a lot of margin and you have some empty paragraphs above your main content that are contributing to the issue.
Hi Andrew – thanks for the quick response. Could you clarify your answer a bit, please — I don’t see any empty paragraphs in my HTML. What am I overlooking?
Also, is there any way to modify the margin of the HR? (I didn’t think HRs had any margin / padding!).
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Which browser are you using btw?
Firefox and Chrome. Oh, and Safari sometimes.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Open your site in Chrome and right click on the horizontal rule or around it. Select ‘Inspect element’.
A new toolbar should appear with HTML on the left and CSS on the right.
Hover your mouse over the <hr> element.
In Chrome’s development tools (the thing that you just opened) orange represents margin and green padding.
Click on the <hr> element and look to the CSS on the right. You should see the CSS responsible for the margin.
Explore the rest of the HTML for the stray <p> tags that are partly responsible.
That should help you understand what CSS you need to override and whereabouts the empty paragraphs could be.
http://developers.google.com/chrome-developer-tools/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you see that the styles that are applying the margin to the <hr> are in a “custom-css…” stylesheet? That hints that you have a Custom CSS plugin which has these styles in a setting somewhere in the dashboard.
Yep, I do (the Jetpack plugin). However, I still can’t find whatever is causing the gap — I’ve just over-ridden everything that I thought even vaguely might be affecting it.
I’m definitely not an expert at CSS, but I’m not a novice either — usually I can puzzle these things out. I’m totally stumped though. I appreciate your suggestions anyway. I’ll keep at it and see if I can figure it out. Otherwise I guess I’ll have to start over.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Deactivate all your plugins to narrow down which is causing the issue with the <hr>.
Hmmm. Never thought of that as a possible problem. Will give it a try – thanks.
Alas, that didn’t seem to do it either.
However, I’ve also tried removing the HR entirely — the gap is still there. Thus, it doesn’t look like the HR is the culprit (look at the current version of the page to see what I mean).
FYI, I in the developers’ tool I now *do* see the empty paragraphs you previously mentioned. However, those are *not* in my HTML. I’m definitely confused!
Ah! So, it looks like the problem was a clearfix I was using incorrectly.
Andrew, thanks for your help – your feedback definitely helped push me in the right direction.
Oops! Not fixed – what I thought was a fix in one browser completely broke my layout in another… oh well. Two days on this problem is too much time lost. Time to scrap this and start over! š
