Return to previous page

Checkout page fields css - by Diana Nikolova

This topic has 13 replies, 3 voices, and was last updated 2 years, 5 months ago ago by Olga Barlow

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.

#325486 Copied Theme version: 1.0

12 Answers
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
#325497 Copied
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

#325724 Copied

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

#325728 Copied

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.

#325729 Copied

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

#325750 Copied

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

#325795 Copied

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

#325798 Copied

Diana Nikolova

Participant

June 13, 2022 at 13:17

I did it, but it doesn’t work 🙁

#325801 Copied

Diana Nikolova

Participant

June 13, 2022 at 14:20

You can see this : https://www.veed.io/view/85e2d61c-44aa-44af-b9f7-9f5a5807639c

#325813 Copied

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

#325826 Copied

Diana Nikolova

Participant

June 13, 2022 at 17:44

Thank you!

#325828 Copied

Olga Barlow

Support staff

June 13, 2022 at 18:05

You are welcome.

Regards

#325838 Copied
Tagged: checkout, fields, page, templates, woocommerce, wordpress
Viewing 13 results - 1 through 13 (of 13 total)