Add instructions for devices with small widths

diff --git a/index.html b/index.html
index fdcc68db531eeff6da3166d2302dcbe7ff914eb4..a156bfad0a63fbde3f974b2409453846b2c250e9 100644 (file)
--- a/index.html
+++ b/index.html
@@ -26,6 +26,8 @@
     <main>
       <p>Open the <b><abbr title="Developer Tools">DevTools</abbr> console</b> to start the demo.</p>
 
+      <p class="mobile-instructions"><small>Press <kbd>F12</kbd> and click the "Console" tab.</small></p>
+
       <table>
         <caption>Keyboard shortcuts to open the DevTools console in various operating systems and web browsers. If none of these shortcuts work, press <kbd>F12</kbd> and click the "Console" tab.</caption>
         <thead>

diff --git a/style.css b/style.css
index 25c97ce1dc6e067495ef7eb19dd4eb4007a68716..bae0a2e3e8b7cb09c02d1d73adda9e8e82f0e8d1 100644 (file)
--- a/style.css
+++ b/style.css
@@ -28,9 +28,20 @@ p {
 }
 
 table {
+  display: none;
   border-collapse: collapse;
 }
 
+@media (min-width: 475px) {
+  .mobile-instructions {
+    display: none;
+  }
+
+  table {
+    display: revert;
+  }
+}
+
 caption {
   caption-side: bottom;
   font-size: 0.9rem;