I have my first customized WordPress site (total newb, not even gonna lie) up and running well except this one annoying issue and Googling does not help. Here is the link where the issue is: http://tvmopperator.com/blog/
My custom post comments badge shows up fine on the blog post's content-page.php until I post more, then only the badge for the first post shows up on the last post. Yes, the comment badge for the first post shows up on the most recent post with the correct comment count and link for the first post, but it's attached to the last post (yikes!). None of the other posts (including first) even show badges. I've spent all day at this so this will be my first stackoverflow question.
Here's the comment badge code:
<div class="post-comments-badge">
<a href="<?php comments_link(); ?>"><i class="fa fa-comments"></i> <?php comments_number( 0, 1, '%' ); ?></a>
</div><!-- post-comments-badge -->
This is exactly the same as I have on the individual excerpt post's "content.php" file so that might be the problem... But that's what my instructor did.
I'm following a course on Udemy: https://www.udemy.com/bootstrap-to-wordpress/learn/v4/content
Would appreciate any help on the matter.
The reason why it's showing only one comment badge is because your post-comments-badge class has an absolute position styling that makes it fixed at one position, so all your comment badges are getting overlapped with each other.
This is the problematic part in your code:
.post-comments-badge
{
height: 70px;
width: 70px;
position: absolute;
top: 25px;
right: 20px;
border: none;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: #4c213d;
text-align: center;
display: table;
}
Remove
position: absolute;
top: 25px;
right: 20px;
Resulting code:
.post-comments-badge
{
height: 70px;
width: 70px;
float: right;
clear: right;
border: none;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: #4c213d;
text-align: center;
display: table;
}