Robbert Bruin Robbert Bruin - 5 months ago 19
HTML Question

Aligning comments counting

I just wanna align the comments counts on our website! The comments counts need to be posted on the same height as the username and date of the comment.

How can i fix this? I already tried with margin and padding but it hasn't the effect.

A preview in the link below: http://zomerhitzz.blogspot.nl/2016/05/janieck-feel-love-sam-feldt-edit.html?showComment=1465159461594#c4321997141132965583

Thanks alot again

Answer

If your talking about the small numbers in the li::before?

Move your ::before onto this class;

.comment-header::before {
    content: counter(countcomments,decimal);
    counter-increment: countcomments;
    float: right;
    font-size: 11px;
    color: #B4B4B7;
    text-align: inherit;
    z-index: 2;
    padding-left: 5px;
}

This way is the best way to do what your trying to achieve as it keeps your elements in flow.

OR ----

If you want to keep it on the li (Add these attributes to your existing classes);

// This is your LI class
.comment {
  position: relative;
}

// Your counter
.comment-thread li:before {
  position: absolute;
  right: 5px;
  top: 10px;
}

// Your city / date comment header
.comments .comments-content .comment-header {
  padding-right: 15px;
}

EDIT ---

Change this;

.comment-thread li:before {
  content: counter(countcomments,decimal);
  counter-increment: countcomments;
  float: right;
  font-size: 11px;
  color: #B4B4B7;
  text-align: inherit;
  z-index: 2;
  position: relative;
}

To this;

.comment-header:before {
  content: counter(countcomments,decimal);
  counter-increment: countcomments;
  float: right;
  font-size: 11px;
  color: #B4B4B7;
  text-align: inherit;
  z-index: 2;
  padding-left: 5px;
}
Comments