Centre PayPal fields

Hi @fcis999,

In general, the PayPal field should have been centred. The behaviour looks more specific to your website. Most probably any existing CSS from theme or plugin is changing the behaviour.

Possible to share a page URL where you have the form added so that we can check and advise if there is any CSS that could be suggested?

If you don’t want to share the URL publicly, you can share the page URL via email to [email protected] using this template:

Subject: "ATTN: WPMU DEV support - wp.org"

Message: Ticket URL

Looking forward to your response.

Kind Regards,

Nithin

I’ve now sent it to the email above

Hi @fcis999,

I hope you are doing well today!

Thank you. We have received your email and checked the page. Please add the following custom CSS code to WordPress Dashboard-Appearance-Customize-Additional CSS or Custom CSS section after Edit Form.

.paypal-button-container {
    margin: auto !important;
}

If you want to target this specific form only you can also add #forminator-module-2566 to the beginning as 2566 is the Form ID on the page.

Please let us know if you need further help or clarification.

Kind regards,
Zafer

Hi Zafer, I’ve tried it and is still not working. Any advice?

Hi @fcis999

Please try this code:

#forminator-module-2566 .forminator-paypal-row .forminator-col .forminator-field .forminator-button-paypal .paypal-buttons-context-iframe {text-align:center !important;}
#forminator-module-2566 .forminator-paypal-row .forminator-col .forminator-field .forminator-button-paypal .paypal-buttons-context-iframe iframe {width:auto !important; margin:0 auto !important; position:relative !important;}

Kind Regards,
Kris

• This reply was modified 1 year, 2 months ago by Kris - WPMU DEV Support.

Thanks, it’s now centred. Is there a way to make it stretch horizontally depending on the width of the page? like the rest of the form elements?

Hi again

Please note this iframe is controled by 3rd party site and their css, and also items (buttons) in that iframe have some own CSS which makes them max-width. With that we cannot control CSS inside iframe.

Please consider 2 things:

1. You have added previous code twice, so before you add new code, make sure to remove doubled code.
2. Add this code, which will make buttons wider for desktop and narrower for mobile

#forminator-module-2566 .forminator-paypal-row .forminator-col .forminator-field .forminator-button-paypal .paypal-buttons-context-iframe {text-align:center !important;}
#forminator-module-2566 .forminator-paypal-row .forminator-col .forminator-field .forminator-button-paypal .paypal-buttons-context-iframe iframe {width:600px !important; margin:0 auto !important; position:relative !important;}
@media all and (min-width:320px) and (max-width: 782px) {
#forminator-module-2566 .forminator-paypal-row .forminator-col .forminator-field .forminator-button-paypal .paypal-buttons-context-iframe iframe {width:300px !important; }
}

Kind Regards,
Kris

Thanks