Merge pull request #141 from Carreau/mobile-hide

Hide buttons on smaller screens (mobile).

Author: steppi

docs/directives/try_examples.md

@@ -7,6 +7,11 @@ Below is an example of the directive in use. The button has been styled with cus
 css as explained in the configuration section below. Without custom css, the button will
 be plain and unadorned.
 
+Note that as starting JupyterLite can download a significant amount of data, and
+that the Jupyter interface is not optimized for mobile, the buttons will be
+hidden on mobile by default (screen width 480px or smaller). This can be
+changed by overwriting with custom CSS.
+
 
 ```rst
 Examples

jupyterlite_sphinx/jupyterlite_sphinx.css

@@ -64,3 +64,14 @@
 @keyframes l13{
     100%{transform: rotate(1turn)}
 }
+
+
+
+/* we do not want the button to show on smaller screens (phones), as clicking
+ * can download a lot of data. 480px is a commonly used breakpoint to identify if a device is a smartphone.  */
+
+@media (max-width: 480px), (max-height: 480px) {
+  div.try_examples_button_container {
+    display: none;
+  }
+}