Merge pull request #1473 from sharetribe/increase-input-font-size-for…

…-ios Increase input font size to avoid zoom on iOS
sharetribe · Sep 22, 2021 · bf11bdb · bf11bdb
2 parents 9ca73ef + fd5f999
commit bf11bdb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2021-XX-XX
 
+- [change] Increase input font size on mobile to avoid Mobile Safari zooming in when focusing on
+  inputs. [#1473](https://github.com/sharetribe/ftw-daily/pull/1473)
 - [change] Update browserlist data to match modern browsers.
   [#1468](https://github.com/sharetribe/ftw-daily/pull/1468)
 - [fix] Font-size was too big for Stripe Elements on small screens on PaymentMethodsForm.

diff --git a/src/styles/marketplaceDefaults.css b/src/styles/marketplaceDefaults.css
@@ -206,12 +206,24 @@ h6 {
   @apply --marketplaceH6FontStyles;
 }
 
-input,
+input {
+  font-family: var(--fontFamily);
+  font-weight: var(--fontWeightMedium);
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: -0.1px;
+  /* No margins for default font */
+
+  @media (--viewportMedium) {
+    font-size: 16px;
+    line-height: 32px;
+  }
+}
+
 textarea,
 select,
 li {
   @apply --marketplaceDefaultFontStyles;
-  line-height: 24px;
 }
 
 p,