Title: Mobile fixed screen
Last modified: January 22, 2022

---

# Mobile fixed screen

 *  Resolved [angelsmoto](https://wordpress.org/support/users/angelsmoto/)
 * (@angelsmoto)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/mobile-fixed-screen/)
 * Hello how are you?
 * I would like to know if there is a way to make the screen fixed on the mobile.
   Today, when the customer goes to the checkout, the screen is fixed, but when 
   the customer clicks on a field to fill it, it enables a zoom and also a way that
   the screen is released, being able to go to the right and left.
 * to get back to the fixed screen, he needs to do the movement with his fingers
   to remove the zoom, but few people know that, and if he doesn’t, the screen is
   cut off
 * this ends up being bad for the user, he ends up getting lost in the fields.
 * follow video showing: [https://files.fm/f/xtptevg2y](https://files.fm/f/xtptevg2y)
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmobile-fixed-screen%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Diego Versiani](https://wordpress.org/support/users/diegoversiani/)
 * (@diegoversiani)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/mobile-fixed-screen/#post-15282709)
 * Hi [@angelsmoto](https://wordpress.org/support/users/angelsmoto/),
 * That problem is a “feature” of the Safari Browser. When the font size of input
   fields is smaller than 16px, it will zoom-in in order to show the text big enough
   for most people to read it.
 * Fluid Checkout _does not_ change the font size for most of the checkout elements,
   leaving it to the Theme to take care of. We’ve decided not to change some styles,
   including the font sizes, so the checkout page looks and feels like the same 
   website.
 * To fix this problem, you’ll need to increase the font size of form input fields
   to 16px or bigger.
 * Some themes give you options to choose the font size, other don’t. Check your
   theme settings if you can do it from there, otherwise, you’ll need to add some
   CSS code, here is an example:
 *     ```
       textarea,
       input[type="email"],
       input[type="number"],
       input[type="search"],
       input[type="text"],
       input[type="tel"],
       input[type="url"],
       input[type="password"],
       input[type="date"],
       input[type="time"] {
           font-size: 16px;
       }
       ```
   
 * You may need to tweak the CSS selectors depending on the styles applied by your
   theme.
 * I’m closing this topic for now. If you need further assistance, please reply 
   to this topic.
 * Best,
    Diego
 *  Thread Starter [angelsmoto](https://wordpress.org/support/users/angelsmoto/)
 * (@angelsmoto)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/mobile-fixed-screen/#post-15320756)
 * I would like to add this code in ADDITIONAL CSS. How do I use this code? because
   there I need to mention that this font size is for the checkout
 *  Plugin Author [Diego Versiani](https://wordpress.org/support/users/diegoversiani/)
 * (@diegoversiani)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/mobile-fixed-screen/#post-15320930)
 * Hi [@angelsmoto](https://wordpress.org/support/users/angelsmoto/),
 * The CSS code sent previously should only serve as a guide to illustrate how you
   might solve the issue on your website. You might need to make some changes to
   it in order to override your theme styles.
 * This CSS code will apply the new font size to all form fields throughout your
   entire website so there is no need to mention Fluid Checkout elements in it. 
   I figured you probably do not want the zooming behavior on other parts of the
   website too, such as contact forms or the product and cart pages.
 * This should work for your website:
 *     ```
       body textarea,
       body input[type="email"],
       body input[type="number"],
       body input[type="search"],
       body input[type="text"],
       body input[type="tel"],
       body input[type="url"],
       body input[type="password"],
       body input[type="date"],
       body input[type="time"] {
           font-size: 16px;
       }
       ```
   
 * Otherwise, if you really want this change to apply only on the checkout page,
   use the code below:
 *     ```
       .fc-wrapper textarea,
       .fc-wrapper input[type="email"],
       .fc-wrapper input[type="number"],
       .fc-wrapper input[type="search"],
       .fc-wrapper input[type="text"],
       .fc-wrapper input[type="tel"],
       .fc-wrapper input[type="url"],
       .fc-wrapper input[type="password"],
       .fc-wrapper input[type="date"],
       .fc-wrapper input[type="time"] {
           font-size: 16px;
       }
       ```
   
 * It can be added in the Additional CSS section within the Customizer. Go To WP
   Admin > Appearance > Customizer, then go to the Additional CSS section. Add the
   code there and save/publish the changes.
 * I hope that helps.
 * Best,
    Diego

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mobile fixed screen’ is closed to new replies.

 * ![](https://ps.w.org/fluid-checkout/assets/icon-256x256.png?rev=3492947)
 * [Fluid Checkout for WooCommerce - Lite](https://wordpress.org/plugins/fluid-checkout/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/fluid-checkout/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/fluid-checkout/)
 * [Active Topics](https://wordpress.org/support/plugin/fluid-checkout/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/fluid-checkout/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/fluid-checkout/reviews/)

## Tags

 * [mobile](https://wordpress.org/support/topic-tag/mobile/)
 * [mobile screen](https://wordpress.org/support/topic-tag/mobile-screen/)
 * [screen](https://wordpress.org/support/topic-tag/screen/)

 * 3 replies
 * 2 participants
 * Last reply from: [Diego Versiani](https://wordpress.org/support/users/diegoversiani/)
 * Last activity: [4 years, 4 months ago](https://wordpress.org/support/topic/mobile-fixed-screen/#post-15320930)
 * Status: resolved