fixing resume rendering in iframe on mobile device

used height=90vh to set a relative height to the screen size

Author: RubyFore

_includes/css/grayscale.css

@@ -483,18 +483,24 @@ body {
     content: "."
   }
 
-  .resume {
+  .resume-ratio-box {
+    position: relative;
     width: 100%;
-	aspect-ratio: 100%;
-  }
+    aspect-ratio: 22 / 17;
+
 
+  }
+  /*.resume {
+    width: 100%;
+   /* aspect-ratio: 22/17;
+  }*/
 
 	   @media(min-width:767px) {
 		   .resume {
 		   width: 100%;
-		   aspect-ratio: 17 / 22;
+		   /*aspect-ratio: 22 / 17;*/
 	   }
-    }
+    }*/
 
     /*! div style */
   .image-gallery {

_includes/resume.html

@@ -1,13 +1,15 @@
 <!--- Resume Section-->
 <section id="resume" class="container resume-section text-center">
     <div class="row justify-content-center">
-        <div class="col-lg-8 col-lg-offset-2"> 
+        <div class="col-lg-8 col-lg-offset-2" > 
             <h2 id="resume">Resume</h2>
                 <!--- <div class="d-flex flex-lg-row"> --->
+                   <!---<div id="resume-ratio-box"> --->
+                        <iframe src="https://drive.google.com/file/d/1TJVjck10_V3kCWGMj6SsZk0QMXOdq9pm/preview" style='width: 100%; height: 90vh' id="resume"></iframe>
 
-                        <iframe src="https://drive.google.com/file/d/1TJVjck10_V3kCWGMj6SsZk0QMXOdq9pm/preview" width="100%", height="600px" id="resume"></iframe>
-                   
-                <!----</div> ---->
+                
+                <!---</div> ---> 
+            <!---</div> --->
         </div>
     </div>
 </section>