feat: CSS now scales with screen size

#24 (comment)
NatuurkundePracticumAmsterdam · Jul 13, 2024 · d76d3d9 · d76d3d9
1 parent 63e654d
commit d76d3d9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/docs/assets/uncertainty/uncertainty.css b/docs/assets/uncertainty/uncertainty.css
@@ -1,19 +1,17 @@
 #click_box {
-    width: 400px;
-    height: 400px;
+    width: 100%;
     border: 1px solid black;
     cursor: pointer;
     position: relative;
 }
 
 #display_box {
-    width: 400px;
-    height: 400px;
+    width: 45%;
     border: 1px solid black;
     cursor: pointer;
     position: relative;
     float: left;
-    margin-left: 100px;
+    margin-left: 10%;
 }
 
 .datapoint {
@@ -27,8 +25,11 @@
 
 .border_zone {
     outline: 10px solid white;
-    width: 400px;
-    height: 400px;
+    width: 45%;
     position: relative;
     float: left;
+}
+
+.dummy {
+    margin-top: 100%;
 }
diff --git a/docs/mvc.md b/docs/mvc.md
@@ -107,10 +107,11 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor
     1. Overleg met je groepje en maak een plan hoe jullie de code gaan aanpassen om onzekerheid in te bouwen. Schrijf nog geen code op je computer maar schrijf de stappen uit met papier en pen. Het is dan veel makkelijker om te overleggen en na te denken. Welke delen van het programma moeten worden aangepast?
     1. Gebruik het plan om je eigen code aan te passen en test dat het werkt.
 
-<div class="container" style="overflow:hidden">
+<div style="overflow:hidden" width="100%">
 <div class="border_zone">
-    <div id="click_box" onclick="addPoint(event)"></div>
+    <div id="click_box" onclick="addPoint(event)"><div class="dummy"></div></div>
+    <div class="dummy"></div>
 </div>
 
-<div id="display_box"></div>
+<div id="display_box"><div class="dummy"></div></div>
 </div>