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 year ago ago by Rose Tyler

  • Avatar: Steven Tay
    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.
    12 Answers
    Avatar: Rose Tyler
    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

    Avatar: Steven Tay
    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.
    Avatar: Rose Tyler
    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

    Avatar: Steven Tay
    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

    Avatar: Steven Tay
    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.
    Avatar: Rose Tyler
    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

    Avatar: Steven Tay
    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

    Avatar: Rose Tyler
    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

    Avatar: Steven Tay
    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.
    Avatar: Rose Tyler
    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

    Avatar: Steven Tay
    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

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 8, 2023 at 16:00

    Hello, Steven Tay,

    You are always welcome!

    Kind Regards,
    8theme team

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

You must be logged in to reply to this topic.Log in/Sign up

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