Added media query for good rendering of content

facebook · Jul 23, 2021 · 45ea2af · 45ea2af
1 parent 20b6c62
commit 45ea2af
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/assets/launch_page.css b/assets/launch_page.css
@@ -296,11 +296,19 @@ hr {
   top: 0;
   width: 100%;
 } */
-
-@media (max-width:768px){
-
+.mobile-show{
+  display: none;
+}
+.mobile-show img {
+  width:300px;
+  height: auto;
 }
 
-@media (min-width:769px){
-
-}
+@media only screen
+    and (min-device-width : 320px)
+    and (max-device-width : 480px){ 
+      .mobile-show {display: inline;
+                    width: 50pxpx;
+                    height: 50px;}
+      .mobile-hide {display: none;}
+  }
diff --git a/index.html b/index.html
@@ -109,7 +109,10 @@ <h2>Any Input</h2>
           <!-- <a href="https://asciinema.org/a/14"><img src="https://asciinema.org/a/14.png" width="836"/></a> -->
           <!-- <a href="https://asciinema.org/a/19519https://asciinema.org/a/14"><img src="https://asciinema.org/a/19519.png" width="836"/></a> -->
           <!-- <a href="https://asciinema.org/a/19519" target="_blank"><img src="https://asciinema.org/a/19519.svg" /></a> -->
+          <a class="mobile-show" href="https://asciinema.org/a/19519" target="_blank"><img src="https://asciinema.org/a/19519.svg" /></a>
+          <div class="mobile-hide">
           <script id="asciicast-19519" src="https://asciinema.org/a/19519.js" async></script>
+          </div>
         </div>
       </div>
       <hr>