Fix newsletter

src/index.html

@@ -417,9 +417,10 @@
                     Subscribe to our newsletter
                 </div>
                 <div class="col-12 col-xl-6 oneline__form">
-                    <input class="textfield oneline__form__component--growing" title="Email" placeholder="Email...">
-                    <button class="rounded-button rounded-button--uppercase oneline__form__component--fixed"
-                            type="submit">Subscribe
+                    <input class="newsletter__form-element textfield oneline__form__component--growing" title="Email" placeholder="Email...">
+                    <button class="newsletter__form-element rounded-button rounded-button--uppercase oneline__form__component--fixed"
+                            type="submit">
+                        Subscribe
                     </button>
                 </div>
             </div>

src/scss/_buttons.scss

@@ -7,6 +7,10 @@
   border-radius: 30px;
   transition: $hover-duration;
 
+  @media all and (max-width: $phone) {
+    padding: 7px 20px;
+  }
+
   &:hover {
     background-color: darken($primary, $hover-threshold);
     transition: $hover-duration;

src/scss/_form.scss

@@ -11,6 +11,14 @@
     font-size: 14px;
     font-weight: 500;
     color: $gray-text;
+
+    @media all and (max-width: $tablet) {
+      font-size: 14px;
+    }
+
+    @media all and (max-width: $phone) {
+      font-size: 12px;
+    }
   }
 }
 
@@ -18,15 +26,27 @@
   display: flex;
   align-content: space-between;
   align-items: center;
+
+  @media all and (max-width: $small-phone) {
+    flex-direction: column;
+  }
 }
 
 .oneline__form__component--growing {
   width: 100%;
   min-width: 100px;
-  margin: 0 10px;
+  margin: 5px 10px;
+
+  @media all and (max-width: $phone) {
+    margin: 5px 5px;
+  }
 }
 
 .oneline__form__component--fixed {
   white-space: nowrap;
-  margin: 0 10px;
+  margin: 5px 10px;
+
+  @media all and (max-width: $phone) {
+    margin: 5px 5px;
+  }
 }

src/scss/_newsletter.scss

@@ -1,6 +1,7 @@
 .newsletter {
   padding: 55px 0;
   background-color: #f4f4f4;
+  min-width: 320px;
 }
 
 .newsletter__title {
@@ -12,7 +13,23 @@
   text-align: center;
 
   @media all and (max-width: $desktop-xl) {
-    margin-bottom: 50px;
+    margin-bottom: 20px;
+  }
+
+  @media all and (max-width: $phone) {
+    font-size: 20px;
+  }
+}
+
+.newsletter__form-element {
+  font-size: 16px;
+
+  @media all and (max-width: $desktop) {
+    font-size: 14px;
+  }
+
+  @media all and (max-width: $tablet) {
+    font-size: 12px;
   }
 }