Kommentare Abzeichen für den ersten Beitrag zeigt auf letzten Beitrag

Question

Ich habe meine erste angepasste WordPress-Website (insgesamt newb, nicht einmal lügen) und läuft gut, außer diesem einen nervigen Problem und Googeln hilft nicht. Hier ist der Link, wo das Problem ist: http://tvmopperator.com/blog/

Meine benutzerdefinierte Post Kommentare Abzeichen zeigt sich fein auf den Content-page.php Blog-Post, bis ich mehr posten, dann nur die Plakette für den ersten Beitrag zeigt sich auf die letzter Beitrag. Ja, das Kommentarabzeichen für den ersten Beitrag erscheint auf dem letzten Beitrag mit der korrekten Anzahl an Kommentaren und dem Link für den ersten Beitrag, aber es ist an den letzten Beitrag angehängt (yikes!). Keiner der anderen Beiträge (einschließlich der ersten) zeigt sogar Abzeichen. Ich habe den ganzen Tag damit verbracht, dies ist meine erste Stackoverflow-Frage.

Hier ist der Kommentar Abzeichen 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 --> 

Dies ist genau das gleiche wie ich auf die individuellen Auszug Post „content.php“ Datei haben, so dass das Problem sein könnte ... Aber das ist, was mein Lehrer hat getan.

Ich verfolge einen Kurs über Udemy: https://www.udemy.com/bootstrap-to-wordpress/learn/v4/content

über die Angelegenheit jede Hilfe schätzen würde.

Answer 1

Der Grund, warum es nur ein Kommentarabzeichen zeigt, ist, dass Ihre post-comments-badge Klasse eine absolute Positionsstyling hat, die es an einer Position fixiert, so dass alle Ihre Kommentarabzeichen sich gegenseitig überlappen.

Dies ist der problematischste Teil im 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; 
} 

entfernen

position: absolute; 
top: 25px; 
right: 20px; 

resultierenden 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; 
}