Docs: Style rules for glyphicons at narrow widths

styles/overrides.css

@@ -66,38 +66,47 @@ p.correct + div > pre {
   background-color: #f6fff6; /* light green hsl(120,100%,98%) */
 }
 
-@media (min-width: 768px) {
+p.fixable:before,
+p.incorrect:before,
+p.correct:before {
+  font-family: "Glyphicons Halflings";
+  color: #4d4d4d; /* gray hsl(0,0%,30%) */
+  margin-right: 0.5em;
+}
 
-  p.incorrect + div + div + div > pre:before, /* vars-on-top */
-  p.incorrect + div + div > pre:before, /* no-continue */
-  p.incorrect + div > pre:before {
-    content: "\e126"; /* thumbs-down */
-    font-family: "Glyphicons Halflings";
-    color: #4d4d4d; /* gray hsl(0,0%,30%) */
-    position: absolute;
-    left: -20px;
-  }
+p.fixable:before {
+  content: "\e136"; /* wrench */
+}
 
-  p.correct + div + div + div > pre:before, /* vars-on-top */
-  p.correct + div + div > pre:before, /* no-continue */
-  p.correct+div>pre:before {
-    content: "\e125"; /* thumbs-up */
-    font-family: "Glyphicons Halflings";
-    color: #4d4d4d; /* gray hsl(0,0%,30%) */
-    position: absolute;
-    left: -20px;
-  }
+p.incorrect:before {
+  content: "\e126"; /* thumbs-down */
+}
 
-  p.fixable:before {
-    content: "\e136"; /* wrench */
-    font-family: "Glyphicons Halflings";
-    color: #4d4d4d; /* gray hsl(0,0%,30%) */
+p.correct:before {
+  content: "\e125"; /* thumbs-up */
+}
+
+@media (min-width: 768px) {
+
+  p.fixable:before,
+  p.incorrect:before,
+  p.correct:before {
     position: absolute;
     left: -20px;
   }
 
   p.fixable,
-  .highlighter-rouge {
+  p.incorrect,
+  p.correct {
     position:relative;
   }
+
+}
+
+@media (max-width: 767px) {
+
+  code {
+    white-space: normal;
+  }
+
 }