Flexbox mobile fix

_includes/logos.html

@@ -1,6 +1,6 @@
 <div class="wrapper">
 
-    <div id="free" class="row pt-2 pb-2">
+    <div id="free" class="row">
 
         <div class="col-sm center">
             <div class="box">
@@ -25,7 +25,7 @@
 
     </div>
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -51,7 +51,7 @@
     </div>
 
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -77,7 +77,7 @@
     </div>
 
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -104,7 +104,7 @@
 
     </div>
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -131,7 +131,7 @@
 
     </div>
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -158,7 +158,7 @@
 
     </div>
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -185,7 +185,7 @@
 
     </div>
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -212,7 +212,7 @@
 
     </div>
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -239,7 +239,7 @@
 
     </div>
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -266,7 +266,7 @@
 
     </div>
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -293,7 +293,7 @@
 
     </div>
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">
@@ -318,7 +318,7 @@
 
     </div>
 
-    <div class="row pt-2 pb-2">
+    <div class="row pt-2">
 
         <div class="col-sm center">
             <div class="box">

_sass/_base.scss

@@ -189,3 +189,74 @@
     :not(.highlight)>table tr:nth-child(2n) {
         background-color: #f8f8f8
     }
+
+ /* Inputs
+ * ============================================== */
+input {
+      font-size: 16px;
+      font-family: "Overpass";
+}
+
+form textarea {
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  min-height: 150px;
+  padding: 14px 24px;
+  box-sizing: border-box;
+  color: #000;
+  background: #FFFFFF;
+  border: 2px solid #D8D8D8;
+  border-radius: 4px;
+  font-size: 16px;
+  font-family: "Overpass";
+}
+
+input[type=text], input[type=textarea], input[type=number] {
+  width: 100%;
+  padding: 14px 24px;
+  box-sizing: border-box;
+  color: #000;
+  background: #FFFFFF;
+  border: 2px solid #D8D8D8;
+  border-radius: 4px;
+}
+
+    /* Keyframes
+ * ============================================== */
+.fade-in {
+-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
+       -moz-animation: fadein 2s; /* Firefox < 16 */
+        -ms-animation: fadein 2s; /* Internet Explorer */
+         -o-animation: fadein 2s; /* Opera < 12.1 */
+            animation: fadein 2s;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}

_sass/_layout.scss

@@ -64,7 +64,7 @@
     }
     }
 
-      .button-submit {
+    .button-submit {
     display: inline-block;
     text-decoration: none !important;
     color: #fff !important;
@@ -77,6 +77,7 @@
     border-radius: 10px;
     padding: 12px 20px;
     margin-left: 15px;
+    cursor: pointer;
 
     &:hover {
     background-color: transparent !important;
@@ -269,6 +270,8 @@
         } */
     }
     
+/* Spacings and Generic
+ * ============================================== */
     .bold {
       font-weight: 600;
     }
@@ -297,6 +300,18 @@
         margin-bottom: 30px;
     }
 
+    .non-justify {
+    text-align: initial;
+    }
+
+    .heading {
+    font-size: 36px;
+    }
+
+    .align-left {
+    text-align: left;
+    }
+
     .bg-mute {
     background-color: #F4F4F4;
     min-height: 500px;
@@ -324,6 +339,7 @@
     box-sizing: border-box;
     text-align: center;
     margin-bottom: 25px;
+    margin-top: 25px;
 
     &:hover {
         transform: scale(1.05);
@@ -361,84 +377,9 @@
     padding-right: 15px;
     padding-left: 15px;
     line-height: 1.4;
-}
-
-.non-justify {
-    text-align: initial;
-}
-
-.heading {
-    font-size: 36px;
-}
-
-.align-left {
-    text-align: left;
-}
-
-input {
-      font-size: 16px;
-      font-family: "Overpass";
-}
-
-form textarea {
-  width: 100%;
-  max-width: 100%;
-  min-width: 100%;
-  min-height: 150px;
-  padding: 14px 24px;
-  box-sizing: border-box;
-  color: #000;
-  background: #FFFFFF;
-  border: 2px solid #D8D8D8;
-  border-radius: 4px;
-  font-size: 16px;
-  font-family: "Overpass";
-}
-
-input[type=text], input[type=textarea], input[type=number] {
-  width: 100%;
-  padding: 14px 24px;
-  box-sizing: border-box;
-  color: #000;
-  background: #FFFFFF;
-  border: 2px solid #D8D8D8;
-  border-radius: 4px;
-}
-
-
-.fade-in {
--webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-       -moz-animation: fadein 2s; /* Firefox < 16 */
-        -ms-animation: fadein 2s; /* Internet Explorer */
-         -o-animation: fadein 2s; /* Opera < 12.1 */
-            animation: fadein 2s;
-}
 
-@keyframes fadein {
+    @include media-query($on-palm) {
-    from { opacity: 0; }
+         flex-basis: auto;
-    to   { opacity: 1; }
+    }
-}
-
-/* Firefox < 16 */
-@-moz-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Safari, Chrome and Opera > 12.1 */
-@-webkit-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Internet Explorer */
-@-ms-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
 }
 
-/* Opera < 12.1 */
-@-o-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}

index.html

@@ -2,8 +2,8 @@
 layout: default
 ---
 
-<div class="row non-justify pt-2">
+<div class="row non-justify">
-	<div class="col-sm">
+	<div class="col-sm pt-2">
 	<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M18.9969 37.0986C28.7099 37.0986 36.5838 29.1732 36.5838 19.3966C36.5838 9.62005 28.7099 1.69458 18.9969 1.69458C9.28386 1.69458 1.40991 9.62005 1.40991 19.3966C1.40991 29.1732 9.28386 37.0986 18.9969 37.0986Z" fill="white"/>
 <path d="M19.0992 8.34485C12.9268 8.34485 11.3733 14.2088 11.3733 19.1793C11.3733 24.1514 12.9252 30.0137 19.0992 30.0137C25.2731 30.0137 26.825 24.1482 26.825 19.1793C26.825 14.2072 25.2731 8.34485 19.0992 8.34485ZM19.0992 12.4283C19.3501 12.4283 19.5786 12.4667 19.7944 12.5242C20.2387 12.9078 20.4561 13.44 20.0293 14.1832L15.9187 21.7908C15.7924 20.8271 15.7732 19.8809 15.7732 19.1793C15.7732 16.9897 15.9235 12.4283 19.0992 12.4283ZM22.1773 15.9333C22.3963 17.1016 22.4251 18.3194 22.4251 19.1777C22.4251 21.3673 22.2748 25.927 19.1007 25.927C18.8514 25.927 18.6197 25.8998 18.4055 25.8487C18.3656 25.8327 18.3272 25.8183 18.2872 25.8087C18.2233 25.7896 18.153 25.7704 18.0923 25.7432C17.3858 25.4427 16.9399 24.8946 17.5824 23.9228L22.1773 15.9333Z" fill="black"/>
@@ -11,13 +11,13 @@ layout: default
 </svg>
 <p class="pt-1"><strong>Public Domain Logos</strong><br>All logos below are in the public domain (<a href="https://creativecommons.org/share-your-work/public-domain/cc0/" target="_blank" rel="noopener">CC0</a>). Download any logo for free unlimited times for any usage. No attribution required.</p>
 	</div>
-	<div class="col-sm">
+	<div class="col-sm pt-2">
 	<svg width="40" height="38" viewBox="0 0 40 38" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M18.3076 1.2226C18.8403 -0.407534 21.1597 -0.407532 21.6924 1.2226L25.1938 11.9374C25.4321 12.6664 26.1153 13.16 26.8863 13.16H38.2171C39.9409 13.16 40.6577 15.3533 39.263 16.3608L30.0962 22.9829C29.4725 23.4334 29.2115 24.2321 29.4498 24.9611L32.9512 35.6759C33.4839 37.306 31.6074 38.6615 30.2128 37.6541L21.046 31.032C20.4223 30.5814 19.5777 30.5814 18.954 31.032L9.7872 37.6541C8.39257 38.6615 6.51611 37.306 7.04881 35.6759L10.5502 24.9611C10.7885 24.2321 10.5275 23.4334 9.90378 22.9829L0.736952 16.3608C-0.657677 15.3533 0.0590694 13.16 1.78293 13.16H13.1137C13.8847 13.16 14.5679 12.6664 14.8062 11.9374L18.3076 1.2226Z" fill="black"/>
 </svg>
 <p class="pt-1"><strong>Get a Custom Logo</strong><br>Need to own the rights to your logo and want to fleshen out your visual identity? <a href="#form">Name a price and we will help you</a>!</p>
 	</div>
-	<div class="col-sm">
+	<div class="col-sm pt-2">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="-497 263.9 40 38" width="40" height="38"><path d="M-458.044 263.944h-37.91v37.91h12.18l.014-.028s3.847-10.373 4.36-11.137c0 0-4.43-1-4.305-8.235s5.666-10.915 5.666-10.915-.972 5.555 3.43 7.6c0 0 4.236 1.208 4.166 5.47-.083 4.263-2.736 5.54-4.097 6.124.5.736 4.083 10.4 4.347 11.096l12.15.014z"/></svg>
 <p class="pt-1"><strong>Support Open Source Design</strong><br>Up to 50% of proceeds are donated to <a href="https://opensourcedesign.net" target="_blank" rel="noopener">Open Source Design</a>, continuing to support design intiatives in open source.</p>
 <p></p>