🐛 BUG: fixing toggle button text overlap on narrow screens (#17)

executablebooks · Aug 8, 2020 · 5440bcb · 5440bcb
1 parent 1be85da
commit 5440bcb
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/sphinx_togglebutton/_static/togglebutton.css_t b/sphinx_togglebutton/_static/togglebutton.css_t
@@ -15,7 +15,7 @@
 
 /* Titles should cut off earlier to avoid overlapping w/ button */
 div.admonition.toggle p.admonition-title {
-    padding-right: 20%;
+    padding-right: 25%;
 }
 
 /* hides all the content of a page until de-toggled */
@@ -59,14 +59,17 @@ button.toggle-button {
     padding: 0px;
 }
 
-button.toggle-button.toggle-button-hidden:before {
-    content: "{{ togglebutton_hint }}";
-    position: absolute;
-    font-size: .8em;
-    left: -6.5em;
-    bottom: .4em;
+@media (min-width: 768px) {
+    button.toggle-button.toggle-button-hidden:before {
+        content: "{{ togglebutton_hint }}";
+        position: absolute;
+        font-size: .8em;
+        left: -6.5em;
+        bottom: .4em;
+    }
 }
 
+
 /* Plus / minus toggles */
 .toggle-button .bar {
     background-color: white;