This is a tidy little setup for responsive threaded comments. The class names here reflect a standard Wordpress comment form, but you can tailor them to your needs. The use case for this is when your comments feature the commenter's avatar on the left, which is an explicit width (in this case, 70px). On larger windows, we want the threaded comme…

Responsive threaded comments

/* 
   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);
    }
}