Last active
December 18, 2015 16:29
-
-
Save ericnicolaas/5811421 to your computer and use it in GitHub Desktop.
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment