Mobile fixed screen

  • Resolved angelsmoto

    (@angelsmoto)


    3 years, 2 months ago

    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

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Diego Versiani

    (@diegoversiani)

    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

    Thread Starter angelsmoto

    (@angelsmoto)

    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

    (@diegoversiani)

    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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile fixed screen’ is closed to new replies.