Fixed position of the social icons

FrontendMentor/ping-coming-soon-page-master/css/style.css

@@ -19,6 +19,7 @@
 
 body {
     font-family: 'Libre Franklin', sans-serif;
+    min-width: 375px;
 }
 
 .flexContainer {
@@ -27,10 +28,27 @@ body {
     align-items: center;
     align-content: center;
 
-    margin-top: 4.2rem;
+    height:100vh;
+
+    /* width: max(90vw, 50vw); */
+    /* width: max(50vw, 90vw); */
+    /* width: min(90vw, 50vw); */
+    /* width: min(50vw, 90vw); */
+    /* width: max(min(90vw, 70vw), 50vw); */
+    /* width: max(min(50vw, 90vw), 50vw); */
+    /* width: min(max(90vw, 50vw), 50vw); */
+    /* width: clamp(90vw, 70vw, 50vw); */
+    /* width: clamp(90vw, 50vw, 50vw); */
+
+    
+    /* width: calc(90vw + (50vw - 90vw) * ((100vw - 375px) / (1440 - 375))); */
+    /*50vw; < 600 90vw*/
+
 }
 
 .logoSection {
+    margin-top: 4.2rem;
+
     display: flex;
     justify-content: center;
 }
@@ -148,16 +166,16 @@ input[type="text"].errorBorder {
 }
 
 footer {
-    position: fixed;
+    margin-top: auto;
-    bottom: 0;
     text-align: center;
-    width: 100vw;
+    /* width: 100vw; */
 }
 .socialButtonsSection {
-    margin-bottom: 1.35rem;
+    margin-bottom: 1.25rem;
     font-size: 14px;
     display: flex;
-    width: 35%;
+    justify-content: space-between;
+    width: 45%;
 }
 
 .socialButtonsSection a {
@@ -196,9 +214,20 @@ footer {
 .attribution { font-size: 11px; text-align: center; }
 .attribution a i { color: hsl(228, 45%, 44%); }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 600px) {
     .flexContainer {
         width: 90vw;
+        /* height: 100vh; */
+    }
+
+    .formSection button {
+        margin-top: 0.55rem;
+    }
+}
+
+@media screen and (min-width: 600px) and (max-width: 1050px) {
+    .flexContainer {
+        width: 75vw;
         height: 100vh;
     }
 
@@ -207,11 +236,13 @@ footer {
     }
 }
 
-@media screen and (min-width: 800px) {
+
+@media screen and (min-width: 1050px) {
     .flexContainer {
         width: 50vw;
-        height: 100vh;
+    }
 
+    .logoSection {
         margin-top: 4.3rem;
     }
 
@@ -291,11 +322,6 @@ footer {
     }
     
 
-    .socialButtonsSection {
-        width: 10%;
-    }
-    
-
     .imageSection {
         margin-top: 4.3rem;
         width: 89%;

FrontendMentor/ping-coming-soon-page-master/index.html

@@ -37,21 +37,21 @@
         <img src="./images/illustration-dashboard.png" alt="Illustration of the dashboard" class="mockupImage">
       </div>
     </main>
+    <footer>
+      <div class="socialButtonsSection">
+        <a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f icon-background"></i></a>
+        <a href="https://twitter.com/tarasis"><i class="fab fa-twitter icon-background"></i></a>
+        <a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram icon-background"></i></a>
+      </div>
+      <p class="copyright">
+        &copy; Copyright Ping. All rights reserved.
+      </p>
+      <p class="attribution">
+        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+        Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>.
+      </p>
+    </footer>  
   </div>
-  <footer>
-    <div class="socialButtonsSection">
-      <a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f icon-background"></i></a>
-      <a href="https://twitter.com/tarasis"><i class="fab fa-twitter icon-background"></i></a>
-      <a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram icon-background"></i></a>
-    </div>
-    <p class="copyright">
-      &copy; Copyright Ping. All rights reserved.
-    </p>
-    <p class="attribution">
-      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
-      Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>.
-    </p>
-  </footer>
   <script src="./js/script.js"></script>
 </body>
 </html>

FrontendMentor/ping-coming-soon-page-master/work-through/myProcess.md

@@ -80,7 +80,7 @@ Played with alignment so mobile & mobile error are close.
 Swapped method of doing the circles around the social icons. I would have preferred the stacks but I couldn't figure out how to put a thin border around a fa-circle
 
 BUGS:
-* when screen not tall enough social buttons and copyright pushed up the page because I clamped them to the bottom of the browser window, rather than the page. 
+* ~~when screen not tall enough social buttons and copyright pushed up the page because I clamped them to the bottom of the browser window, rather than the page.~~
 * ~~because I used attacked circles I can't just change the background to blue for hover. Need to either sub in a filled circle on hover OR swap to manually creating the circle~~
 * transitions sizes between 600 and about 800 look wrong / bad / odd
 
@@ -92,4 +92,12 @@ How to better handle this?????? Should be dynamic font sizing & padding I guess?
 I have a working solution the error message on the 1440x1024 resolution but it doesn't look good/work on the in between resolutions. Positioning should be calculated, based on resolution
 
 To Research: 
-* Dynamic font sizing to look nicer transitioning up.
+* Dynamic font sizing to look nicer transitioning up.
+
+Found a formula to scale the fonts, tried to use it to work with the view port width scaling but it wouldn't work. 
+
+Fixed positioning of the footer section and social buttons. Needed it back in the flexbox, and set the margin-top to auto to fill up the space
+
+Last thing is my hack for the error when email field and button are in a row. How to position the text relative to the input field? Can I hide it behind it and move it down? If its in the same row, then it takes up space which we don't want, hence the 0 width (zero height for when in column)
+
+Ergh. Want to be done with this. Frustrating myself.