new styles

Author: Dhruva Shaw

_projects/mcba.md

@@ -54,9 +54,22 @@ bibliography: papers.bib
 toc: true
 
 _styles: >
-    object {
-        width:100%;
-        max-height:100%;
+    .container {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+    }
+
+    /* Then style the iframe to fit in the container div with full height and width */
+    .responsive-iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
     }
 ---
 
@@ -127,5 +140,7 @@ _Future Directions_:
 
 ## Protocols
 Here is the protocol(steps) to reproduce our work with ease.
-<iframe src="https://www.protocols.io/widgets/doi?uri=dx.doi.org/10.17504/protocols.io.n92ldr869g5b/v1" style="width: 520px; height: 300px; border: 1px solid transparent;"></iframe>
-<object data='{{ "/assets/pdf/protocol_mcba.pdf" | relative_url  }}' type='application/pdf'/>
+<iframe src="https://www.protocols.io/widgets/doi?uri=dx.doi.org/10.17504/protocols.io.n92ldr869g5b/v1" style="width: 100%; height: 300px; border: 1px solid transparent;"></iframe>
+<div class="container">
+    <object data='{{ "/assets/pdf/protocol_mcba.pdf" | relative_url  }}' class="responsive-iframe" type='application/pdf'/>
+</div>