c0.1.127 CSS Responsive fishEye

static/style.css

@@ -289,6 +289,68 @@ b {
   }
 }
 
+/* --------------------------------------------------------------------------- */
+/* Description Page */
+
+#fishBody {
+  width: 40%;
+  position: relative;
+}
+
+#fishEye {
+  visibility: hidden;
+}
+
+@media screen and (min-width: 576px) {
+  #fishEye {
+    position: relative;
+    top: -112px;
+    left: -79px;
+    width: 5%;
+    visibility: visible;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  #fishEye {
+    position: relative;
+    top: -151px;
+    left: -106px;
+    width: 5%;
+    visibility: visible;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  #fishEye {
+    position: relative;
+    top: -203px;
+    left: -143px;
+    width: 5%;
+    visibility: visible;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  #fishEye {
+    position: relative;
+    top: -242px;
+    left: -170px;
+    width: 5%;
+    visibility: visible;
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  #fishEye {
+    position: relative;
+    top: -282px;
+    left: -198px;
+    width: 5%;
+    visibility: visible;
+  }
+}
+
 /* --------------------------------------------------------------------------- */
 /* IHP Page */
 

wiki/pages/description.html

@@ -50,10 +50,10 @@
 
 <div>
   <img src="https://static.igem.wiki/teams/4200/wiki/description/fishwithvibriosis.png"
-    alt="Image of fish having vibriosis" style="width: 40%; position: relative;" id="fishBody">
+    alt="Image of fish having vibriosis" id="fishBody">
 
   <img src="https://static.igem.wiki/teams/4200/wiki/description/fishwithvibriosis-eye-no-bg.png"
-    alt="Image of fish having vibriosis" style="position: relative;top: -203px;left: -143px;width: 5%;" id="fishEye">
+    alt="Image of fish having vibriosis" id="fishEye">
 </div>
 
 <p class="reveal-on-scroll">Our bacteria of interest to tackle this infection in fish is <em>V.parahaemolyticus</em>. It