diff --git a/README.md b/README.md
index 9cbb8c6f9..1645fe5a9 100644
--- a/README.md
+++ b/README.md
@@ -75,7 +75,7 @@ Support for existing JupyterLab themes!
 
 ### Compact View on Mobile Devices 📱
 
-![mobile](https://user-images.githubusercontent.com/591645/101954969-48424780-3bfd-11eb-8ce5-85f3d2d3ae4f.gif)
+![mobile](https://user-images.githubusercontent.com/591645/101995448-2793f380-3cca-11eb-8971-067dd068ccbe.gif)
 
 ### Support for federated extensions 🧩
 
diff --git a/packages/notebook-extension/style/base.css b/packages/notebook-extension/style/base.css
index d24fa70c6..1fd02e8c2 100644
--- a/packages/notebook-extension/style/base.css
+++ b/packages/notebook-extension/style/base.css
@@ -85,8 +85,27 @@
   white-space: nowrap;
 }
 
-@media only screen and (max-width: 760px) {
-  .jp-ClassicCheckpoint {
-    display: none;
-  }
+/* Mobile View */
+
+body[data-format='mobile'] .jp-ClassicCheckpoint {
+  display: none;
+}
+
+body[data-format='mobile'] .jp-InputArea,
+body[data-format='mobile'] .jp-OutputArea-child {
+  flex-direction: column;
+}
+
+body[data-format='mobile'] .jp-InputPrompt,
+body[data-format='mobile'] .jp-OutputPrompt {
+  flex: 0 0 auto;
+  text-align: left;
+}
+
+body[data-format='mobile'] .jp-InputArea-editor {
+  margin-left: var(--jp-notebook-padding);
+}
+
+body[data-format='mobile'] .jp-OutputArea-child .jp-OutputArea-output {
+  margin-left: var(--jp-notebook-padding);
 }