[Resolved] Comments are closed spacing problem

[Ben]

Hi,

I have two posts here which have different spacing below the single post main content and above the footer menus. Specifically on desktop, this space is between the ‘Don’t miss out’ newsletter sign up form and the footer menus (on mobile it’s between the single post and the sign up form from the sidebar which gets shifted down below the single post):

https://www.notesinspanish.com/2007/07/05/inspired-beginners-podcast-5-el-fin-de-semana/ – Too large space on desktop between ‘Don’t miss out’ newsletter sign up and footer menu

https://www.notesinspanish.com/2019/09/20/bens-best-bits-of-real-spanish/ – Smaller, correct spacing between ‘Don’t miss out’ newsletter sign up and footer menu

I can see from ‘view page source’ for both pages that the bigger spacing on the first link comes from the ‘comments are closed’ div’s and text that has been hidden by CSS in my child theme (CSS I got from another post here).

<div class="comments-area">
				<div id="comments">

			<p class="no-comments">Comments are closed.</p>
		
</div><!-- #comments -->
			</div>

The class “comments-area” in the first div includes padding: 40px; – I found that from dev tools in chrome:

.comments-area, .separate-containers .inside-article, .separate-containers .page-header, .separate-containers .paging-navigation {
    padding: 40px; 
}

Interestingly for both the above posts, there are no comments, but when editing the posts I see that ‘allow comments’ is ticked for both posts – as I have ‘close comments on posts over 1 day old’ in settings, there will be no comments box.

So my questions are:
1. What do I need to do with CSS in my child theme to get rid of the extra space in the first post?
2. Why would it be that for two seemingly identical posts – no comments, comments closed – the first one is printing the (hidden via css) ‘comments are closed’ text, and the second one not? (Could it be that the first post once had comments that I deleted, and WP is keeping a record of this somehow?)

Many thanks for your help.

[David]

Hi there,

1. You can use this CSS:

.comments-area {
    display: none;
}

2. Yeah, not fully sure on this, but if the post had comments previously then yes it would continue to output the container for that.

[Ben]

Wonderful, that CSS worked, thank you! And as a result question 2 is solved too as it no longer matters if the container is output or not. Thank you!

[David]

You’re welcome

[Author]

Posts