From c1d6c93b40fec96647ddae28001323af1a3dbb9d Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 9 Jan 2023 19:57:31 -0800
Subject: [PATCH] Add instructions for devices with small widths

---
 index.html |  2 ++
 style.css  | 11 +++++++++++
 2 files changed, 13 insertions(+)

diff --git a/index.html b/index.html
index fdcc68d..a156bfa 100644
--- 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 25c97ce..bae0a2e 100644
--- 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;
-- 
2.47.3