Checkout page fields css - by Diana Nikolova

This topic has 13 replies, 3 voices, and was last updated 1 year, 9 months ago ago by Olga Barlow

  • Avatar: Daniel Partadzhiev
    Diana Nikolova
    Participant
    June 9, 2022 at 11:03

    Hi, I’ve changed the design of the checkout page, but I can’t apply the same changes on my mobile version. It’s about the shape of the fields
    In the second screenshot, in addition to the round shape, I try to pull all the fields slightly to the left, because they are too small.

    Please, contact administrator
    for this information.
    12 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 9, 2022 at 12:21

    Hello,

    Theme Options > Styling > Inputs Border Radius > set 100, clear cache of browser on your device, and check.
    Try to add the next code in Theme Options > Theme custom CSS > Mobile:

    .cart-order-details .shop_table .speedy_row > td {
        padding: 0 !important;
    }
    .cart-order-details #speedy_client_table input {
        width: 100% !important;
    }
    .cart-order-details .shop_table  #speedy_client_table td {
        vertical-align: top;
    }
    .cart-order-details .order-review {
        padding: 1em;
    }

    Regards

    Avatar: Daniel Partadzhiev
    Diana Nikolova
    Participant
    June 12, 2022 at 15:25

    The code I entered doesn’t work for me, but thank you very much for the fields.
    On the desktop version, I want the left column in the checkout to be larger than the right.
    And the mobile fields do not have the same shape as the desktop.

    https://prnt.sc/ygIPnzlajT-G
    I’m trying to make these fields a little wider and slightly to the left

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 12, 2022 at 15:55

    Where the code was added? Please provide temporary wp-admin access, so we can take a closer look.

    Regards

    Avatar: Daniel Partadzhiev
    Diana Nikolova
    Participant
    June 12, 2022 at 15:58

    About the code you sent me. I mean, I don’t like the way the fields are arranged, not that it doesn’t work. Sorry for the confusion.

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 13, 2022 at 09:29

    Hello,

    As I can see you did not add the mentioned code to the suggested are. Once I added https://prnt.sc/rGHlS60ibLtz fields displayed the following way https://prnt.sc/Srm7iTpI9t9R

    Is that what you want?

    Regards

    Avatar: Daniel Partadzhiev
    Diana Nikolova
    Participant
    June 13, 2022 at 13:10

    Thank you, can you last look at the mobile version everything loads extremely slowly and breaks a lot of items
    https://prnt.sc/TkJsmV02Ntba
    https://prnt.sc/qkG-U_Ilbnj5

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 13, 2022 at 13:12

    Hello,

    Keep this option disabled if you use Elementor and cache plugin https://prnt.sc/cRUxc_1VebO6 and check now.

    Regards

    Avatar: Daniel Partadzhiev
    Diana Nikolova
    Participant
    June 13, 2022 at 13:17

    I did it, but it doesn’t work 🙁

    Avatar: Daniel Partadzhiev
    Diana Nikolova
    Participant
    June 13, 2022 at 14:20
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 13, 2022 at 17:40

    Hello,

    We have tested your site and the styles are ok https://recordit.co/Z8909L8U6c
    Loading time is slow but we can do nothing with this from theme side, try to contact your hosting provider to get help with this. But styles are ok.

    Regards

    Avatar: Daniel Partadzhiev
    Diana Nikolova
    Participant
    June 13, 2022 at 17:44

    Thank you!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 13, 2022 at 18:05

    You are welcome.

    Regards

  • Viewing 13 results - 1 through 13 (of 13 total)

The issue related to '‘checkout page fields css’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.