Archived topic

Checkout Optimizing

5 replies · Started by Renaldo on June 28, 2019

Viewing posts 1–6 of 6

June 28, 2019 at 3:49 pm #944259

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

June 28, 2019 at 4:09 pm #944269

Hi there,

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

June 28, 2019 at 4:45 pm #944280

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/

June 29, 2019 at 8:00 am #944659

So are you wanting the labels to be larger?

June 29, 2019 at 2:21 pm #944879

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

June 29, 2019 at 5:26 pm #944952

Does this help?:

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

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

Let me know :)

This archived topic is closed to new replies.

Start building better websites today.