new file

2024/new/css/mystyle.css

@@ -263,6 +263,7 @@ footer {
 
 /* The modal setup ends here */
 
+
 /* UPDATE CALLOUT BOX */
 .callout {
     background-color: rgb(217, 239, 255);

2024/new/css/style.css

@@ -215,6 +215,7 @@ body {
   background-color: var(--body-bg-color);
 
   text-rendering: optimizeLegibility;
+
 }
 
 /* Justify and hyphenate all paragraphs */
@@ -856,4 +857,11 @@ h4,
 h5,
 h6 {
   margin-bottom: 0.8rem;
+}
+
+/* Responsive iFrame for GeoGebra applet with fixed size */ 
+iframe {
+  background-color: var(--body-bg-color);
+  max-width: 100%;
+  max-height: 100%;
 }

2024/new/sequences.html

@@ -294,11 +294,14 @@ <h2>These are examples with iframes</h2>
 
             <h3>This is an example from GeoGebra:</h3>
 
+
+
+            <br/>
+
             <div class="myFrame">
                 <iframe scrolling="no" title="Slope field explorer" allowfullscreen=""
                     src="https://www.geogebra.org/material/iframe/id/dabkhkqr/width/712/height/404/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/false/ctl/false"
-                    width="712px" height="404px" style="border:0px;"> </iframe>
-
+                    width="712px" height="404" style="border:0px;"> </iframe>
             </div>
 
 
@@ -308,17 +311,30 @@ <h3>This is an example from GeoGebra:</h3>
             <h3>This is an example with MathCell:</h3>
 
             <div class="myFrame">
+
+            </div>
+
+            <div class="myFrame hide-small">
                 <iframe scrolling="no" style="border:0px;" src="https://www.dynamicmath.xyz/sketches/mathcell/eversion/"
                     width="500px" height="500px"></iframe>
             </div>
+            <div class="myFrame hide-medium hide-large">
+                <p class="callout"> 
+                    <img style="float: left;padding: 8px;" src="imgs/loadcat.gif">
+                    Sorry, this applet is not supported for small screens. <br/>
+                    Rotate your device to landscape. <br/>
+                    Or resize your window so it's more wide than tall.
+                </p>
+            </div>
+
 
             <br />
             <hr>
 
             <h3>This is an example of interactive applet made with p5js:</h3>
 
-            <iframe style="border:0px;" src="https://www.dynamicmath.xyz/sketches/tesseract/" width="100%"
-                height="450px" scrolling="no"></iframe>
+            <iframe style="border:0px;" src="https://www.dynamicmath.xyz/sketches/tesseract/" 
+            width="100%" height="450px" scrolling="no"></iframe>
 
             <br />
 
@@ -396,6 +412,7 @@ <h3>This is an example of interactive applet made with p5js:</h3>
 
     <!-- Ends main content -->
 
+
 
     <script src="js/scripts.js"></script>
     <script> includeHTML(); // Import html info file </script>