Responsiveness checkout process – mobile version

This topic has 5 replies, 3 voices, and was last updated 6 years, 9 months ago by Bogdan Donovan.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
February 10, 2018 at 10:34 am #38786

JuliaSan
Participant

Hi,
I am testing the mobile version of our website before go-live and I have realized that some elements in the shop are not responsive:
1. in the shopping cart the shopping cart summary element (below coupon) is too wide
2. and on the checkout page several elements are too wide:
– billing fields section
– shipping fields section
– order review section

Is there a setting or a css code for mobile with which we can make this responsive – just like the rest of the theme?

Thanks,
Julia

Attachments:
You must be logged in to view attached files.

February 10, 2018 at 12:12 pm #38831
Bogdan Donovan
Keymaster
We have checked your site and found some custom CSS previously applied to it. Please see screenshots https://prnt.sc/icr6gv https://prnt.sc/icr7wc https://prnt.sc/icr85h https://prnt.sc/icr9yy. In general if you not using Germanized plugin anymore you also need to remove custom CSS for it.

Also, try to add the following code snippet to the Mobile Custom CSS area in Theme Settings to make order table font smaller on mobile
```
body tr.order-total strong .amount, 
body tr.order-total th {
 font-size: 16px;
}
```
Regards
February 10, 2018 at 2:37 pm #38883

JuliaSan
Participant

Hi, thanks for the quick response.
I am not using Germanized, but German Market did you mean that? But it is still activated, so I cannot remove the CSS, or?
The codes that are on your screenshots I got from your colleagues some time ago, because these same pages looked crooked on the desktop. (https://xtemos.com/forums/topic/checkout-button-missing/#post-26432)
So if I delete them I guess I will have an issue on the desktop again… Or should I move them from the general CSS section to the “custom CSS for desktop” section?
Please advise. 🙂
Thank you so much!
Julia

February 11, 2018 at 8:33 am #38958

Artem Temos
Keymaster

We can’t see your checkout page because of maintenance mode enabled.

February 11, 2018 at 10:18 am #38981

JuliaSan
Participant

HI, I have disabled maintenance mode.
Thanks

February 11, 2018 at 11:41 am #38995

Bogdan Donovan
Keymaster

We have checked your site, turned off the previous custom code in the browser DevTools and the checkout page looks normally for us on the desktop and mobile. This can be seen in the screenshots https://gyazo.com/afdf809e287d402906b15ae37f0afbb8 https://gyazo.com/99d2c76d2fd3462ce63f3ad488cd2a7c

Please, try to remove this custom code from your theme settings and tell us what exactly look crooked on the desktop and we will prepare the actual code for you

Regards
Author

Posts