Fixed mobile formatting

ChurchApps · Oct 5, 2024 · fa913a8 · fa913a8
1 parent f4a099a
commit fa913a8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/public/css/video.css b/public/css/video.css
@@ -7,14 +7,12 @@
   color: #24b9ff;
 }
 video {
-  width: 70%;
+
   margin:0px;
   padding:0px;
   vertical-align: top;
 }
 #playlist {
-  float:right;
-  width: 30%;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -33,3 +31,22 @@ li a {
 li a:hover {
   text-decoration: none;
 }
+
+@media (min-width: 768px) {
+  video {
+    width: 70%;
+  }
+  #playlist {
+    float:right;
+    width: 30%;
+  }
+}
+
+@media (max-width: 767px) {
+  video {
+    width: 100%;
+  }
+  #playlist {
+    width: 100%;
+  }
+}
diff --git a/tutorial-maker/index.md b/tutorial-maker/index.md
@@ -11,8 +11,7 @@ title: How to Make Tutorials
   <ul id="playlist">
       <li class="active"><a href="../videos/tutorial-maker/install/output.mp4">Install the Tutorial Maker</a></li>
       <li><a href="../videos/tutorial-maker/create/output.mp4">Create a Script</a></li>
-      <li><a href="../videos/lessons/schedule-lesson/output.mp4">Running the Tutorial Maker</a></li>
-      <li><a href="../videos/tutorial-maker/run/output.mp4">Connect Apps</a></li>
+      <li><a href="../videos/tutorial-maker/run/output.mp4">Run tutorial-maker</a></li>
   </ul>
 </div>