[Support request] Checkout Optimizing

[Renaldo]

Good Evening

After testing the checkout we noticed when viewing checkout and adding details like your name/email etc when tapping on a box to add details the checkout zooms in on mobile, this kills the UX and you need to zoom out again to see full page view.

How can this be fixed, so that the checkout page stays fixed and does not zoom in?

Thanks

[Tom]

Hi there,

It seems iOS will zoom if the font size is too small: https://stackoverflow.com/a/6394497/2391422

[Renaldo]

Great that has been sorted. I am almost finished with things.

The current checkout the text is, all the same, how can we change this so there is a difference between the boxes and labels? Please see screenshots attached. https://postimg.cc/gallery/xi7llduy/

[Tom]

So are you wanting the labels to be larger?

[Renaldo]

Hey Tom

Please see the images below on how our current checkout is displayed. https://postimg.cc/gallery/xi7llduy/

We just need a change in the size of labels on the boxes. So the checkout page is not overpowered with too much data.

There is a clear indication of what needs to be added and where. Please see screenshots. You can also view the checkout page on botthms.com/checkout

[Tom]

Does this help?:

.woocommerce-checkout label {
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
}

.woocommerce-checkout input {
    font-size: 12px;
}

Let me know 🙂

[Author]

Posts