Hide buttons on smaller screens (mobile).

See #140, we might want to also add a warning dialog from Javascript as
well in a subsequent PR.

Author: Carreau

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 430px 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, 430px, is the width of iPhone 14 pro max */
+
+@media (max-width: 430px) {
+  div.try_examples_button_container {
+    display: none;
+  }
+}