Merge pull request #83 from UoaWDCC/MainGalleryFix

fixing scaling issues with gallery component

web/src/styles/componentStyles/MainGallery.css

@@ -23,6 +23,8 @@
   object-fit: cover;
   width: 100%;
   height: 100%;
+
+
   flex-shrink: 0;
   flex-grow: 0;
   transition: translate 700ms ease-in-out;
@@ -72,8 +74,8 @@
   left: 0%;
   bottom: 0%;
   color: #000000;
-  margin-left: 4%;
-  margin-bottom: 1.5%;
+  margin-left: clamp(20px, 4%, 4%);
+  margin-bottom: clamp(20px, 1.5%, 1.5%);
 }
 
 .text {
@@ -89,6 +91,7 @@
   border-radius: 0.4em;
   padding: 0.3em 0.5em;
   margin: 0;
+  margin-left: .2em;
   box-shadow: 0.1em 0.2em 0.3em rgba(0, 0, 0, 0.2);
 }
 
@@ -127,3 +130,29 @@
 .poo {
   overflow-wrap: break-word;
 }
+
+@media screen and (max-width: 1900px) {
+  .back, .forward {
+    scale: 0.7;
+    margin-right: 2%;
+    margin-left: 2%;
+  }
+
+  .details{
+    margin-left: 6%;
+    margin-bottom: 1.5%;
+  }
+}
+
+@media screen and (max-width: 1580px) {
+  .details h1 {
+    font-size: 1.8em;
+    margin-left: .4em;
+  }
+
+  .back, .forward {
+    scale: 0.6;
+    margin-left: 0%;
+    margin-right: 0%;
+  }
+}