Mobile fixed screen

Hi @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

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

Hi @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