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

On a mobile

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.