Return to previous page

Check-out Payment Page using Mobile phone to view, 2 Payment Methods Images Not Alligned to Center.

This topic has 13 replies, 2 voices, and was last updated 1 years, 9 months ago ago by Rose Tyler

Steven Tay

Participant

March 7, 2023 at 10:58

Hi,

Good day to you.

I have installed various types of Payment methods in my WordPress and at Final Payment Check-out page and only when using various types of “Mobile Phones” to view, the Payment type Icons Images especially PayPal and Credit/ Debit Cards are both not aligned to center.

Please and kindly help to guide me on how to make them align to center.

Kindly refer to Private Content Area.

Thank you very much.

Steven Tay

Please, contact administrator
for this information.

#349169 Copied Theme version: 5.0.4 WooCommerce version: 7.4.1

12 Answers
Rose Tyler

Support staff

March 7, 2023 at 14:14
Hello, Steven Tay,

Thank you for contacting us and for using XStore.

You may use additional plugins, however, please note that providing support or making changes to them is not included in our basic support scope.

Please try adding the following code to the Theme Options > Theme Custom CSS > Mobile section:
```
.woocommerce-checkout .payment_methods {
    text-align: center;
}
.woocommerce-checkout .ppcp-button-container {
    min-width: unset;
}
.woocommerce-checkout .payment_box {
    padding-left: 0px;
}
```
Kind Regards,
8theme team
#349202 Copied
Steven Tay

Participant

March 7, 2023 at 14:35

Hi Rose,

Thank you vey much for your guide.

Please refer to Private content area.

Many thanks again.

Steven

Please contact administrator
for this information.

#349208 Copied

Rose Tyler

Support staff

March 7, 2023 at 16:55

Hello, Steven Tay,

Yes, this is the correct place. In this case, the code will affect devices with screen sizes 480px and smaller.

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Kind Regards,
8theme team

#349242 Copied

Steven Tay

Participant

March 8, 2023 at 04:37

Hi Rose,

Good day to you.

Thank you very much for your reply and noted with your advise.

Steven Tay

#349269 Copied

Steven Tay

Participant

March 8, 2023 at 05:08

Hi Rose,

After added your custom CSS in my Mobile CSS section, the PayPal icon positioning is ok now BUT the other 3 Payment Methods below becomes Not aligned:

ACH Payment
Credit/ Debit Card
Bitcoin. Altcoin

Icons positioning becomes NOT aligned.

Can you please help to provide an “additional” Custom CSS in Mobile CSS for the 3 Payment methods to realign its positiong to normal?

Kindly and please refer to Private content area.

Please help me.

Thank you very much Rose.

Steven Tay

Please contact administrator
for this information.

#349271 Copied
Rose Tyler

Support staff

March 8, 2023 at 09:39
Hello, Steven Tay,

Try to change this code https://prnt.sc/4lSiYY_kPhzw to:
```
.woocommerce-checkout .payment_methods {
    text-align: center;
}
.woocommerce-checkout .ppcp-button-container {
    min-width: unset;
}
.woocommerce-checkout .payment_box {
    padding-left: 0px;
}
.woocommerce-checkout #shipping_method li {
    flex-wrap: wrap;
    position: relative;
}
.woocommerce-checkout #payment .payment_methods label, .woocommerce-checkout #shipping_method label {
    max-width: calc(100% - 20px);
}
.woocommerce-checkout #payment .payment_methods input[type=radio], .woocommerce-checkout #shipping_method input[type=radio] {
    float: left;
}
```
Kind Regards,
8theme team
#349299 Copied
Steven Tay

Participant

March 8, 2023 at 10:17

Hi Rose,

Thank you very much for your help again.

May I know when you mentioned the code will affect devices with screen sizes 480px and smaller.

If users with devices screen size 480px or smaller, What kind of affected problems will the user encounter?

Please let me know.

Many thanks again Rose.

Steven Tay

#349307 Copied

Rose Tyler

Support staff

March 8, 2023 at 11:38

Hello, Steven Tay,

We apologize, but we are having difficulty understanding your question.

There are five areas in Theme Options > Theme Custom CSS (https://prnt.sc/hykTq7ebcIqW) which related on the particular device and have a hint about the screen size which will be affected by custom code added there. The Global CSS area means that the code will work on all devices.

We hope this information is helpful.

Kind Regards,
8theme team

#349320 Copied

Steven Tay

Participant

March 8, 2023 at 12:25

Hi Rose,

My sincere apology for not asking my question clearly.

Kindly and please refer to Private content area.

Thank you very much Rose.

Steven Tay

Please contact administrator
for this information.

#349329 Copied

Rose Tyler

Support staff

March 8, 2023 at 14:40

Hello, Steven Tay,

You asked us about code to change the displaying of Payments on the Checkout page. The custom code https://prnt.sc/R7dv2GKxk6qs will do this. Please check by yourself, after additng the code, visit the Checkout page from your mobile > clear cache of the browser and check the result.

Kind Regards,
8theme team

#349348 Copied

Steven Tay

Participant

March 8, 2023 at 14:45

Hi Rose,

Your custom code worked to resolve my problem inquiry as in out if alignment in checkout page.

Really appreciate your kind help as always.

All aligned know with many thanks to you Rose.

Steven Tay

#349352 Copied

Rose Tyler

Support staff

March 8, 2023 at 16:00

Hello, Steven Tay,

You are always welcome!

Kind Regards,
8theme team

#349379 Copied
Tagged: align images, best selling, mobile checkout, payment, themes, woocommerce
Viewing 13 results - 1 through 13 (of 13 total)