Last Updated: July 25, 2019
·
4.628K
· ericnicolaas

Responsive threaded comments

While working on a new Wordpress theme, I have come up with a tidy little setup for the threaded comments section.

This is what we want our comments to look like:

On a desktop

Desktop layout

On a mobile

Mobile layout

Our comments display an avatar on the left, which is 70px wide. On larger screens, we want each threaded comment block to indent so that the left margin aligns with the text of the parent comment. On smaller screens, we will indent by a percentage to keep threaded comment blocks a little wider.

/*     
   The baseline. This will be applied to any browser that does not
   support calc, and any browser that is smaller than 800px wide 
*/
.comments-list, 
.comment { 
    width: 100%; 
}

.comments-section .children {
    margin-left: 5%;
    padding-left: 0;
    width: 95%;
}

/* 
  For browser over 800px wide (50em = 800px), threaded comment blocks are
  indented by a specific unit -- not percentages.
  Note that our root font size is 10px, so 1rem = 10px and 7rem = 70px. 
*/
@media all and (min-width: 50em) {
    .comments-section .children {       
    /* Why the use of calc for margin-left? 
       Because browsers that don't support calc will be served 
       up the mobile styling, which is percentage based.  */
    margin-left: calc( 7rem );
    margin-left: -moz-calc( 7rem );
    margin-left: -webkit-calc( 7rem );

    width: calc(100% - 7rem);
    width: -moz-calc(100% - 7rem);
    width: -webkit-calc(100% - 7rem);
    }
}

This setup uses calc to define the widths of the threaded comment blocks. But calc support in browsers is far from universal, so the percentage-based default actually kills two birds in one stone: it accounts for smaller screens and for browsers that do not support calc.

1 Response
Add your response

Welcome

over 1 year ago ·