Fix scaling and responsiveness, Safari bug (#1196)

* Setup structure for post event

* Start of designs

* Gif added

* Fix the thing

* Sizing

* last things

* Fix scaling issues on desktop and safari

* Fix a lot of responsive

Author: peterkos

index.js

@@ -13,3 +13,4 @@ console.log(hiringMessage);
 // Comment generated via js instead of directly in HTML so the hiring message text is only in one place
 const comment = document.createComment("\n"+hiringMessage.toString()+"\n");
 document.insertBefore(comment, document.firstChild);
+

sass/event.scss

@@ -1200,23 +1200,19 @@ footer#end-footer {
 #end-main {
     display: flex;
     flex-direction: row;
-    // border: 3px solid yellow;
-    height: calc(100vh - #{$nav-height});
     margin: 0 auto;
-    margin-top: $nav-height / 2;
-    width: 90%;
-    bottom: 0;
+    margin-top: $nav-height;
+    top: 0;
+    position: absolute;
 
     #thank-you-container, #ricky-container {
-        // border: 3px solid yellow;
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
     }
 
     #thank-you-container {
         width: 40%;
-        // border: 3px solid yellow;
 
         h1 {
             font-size: 4em;
@@ -1235,8 +1231,14 @@ footer#end-footer {
 
     #ricky-container {
         width: 60%;
-        // border: 3px solid yellow;
-        overflow: hidden; // Beeg gif
+        object-fit: scale-down;
+        height: auto;
+        display: flex;
+        align-items: d;
+
+        img {
+            width: 100%;
+        }
     }
 }
 
@@ -1434,6 +1436,7 @@ footer#end-footer {
             }
         }
     }
+
     #end-main {
         flex-direction: column-reverse;
         width: 100%;
@@ -1792,6 +1795,10 @@ footer#end-footer {
         justify-content: space-around;
         gap: 20px;
     }
+
+    #end-main #thank-you-container h1 {
+        font-size: 2em;
+    }
 }
 
 @media screen and (max-width: 650px) {