Centering Stripes payment form

I'm looking for CSS help centering the Stripes payment form as shown in the After picture by bringing in the border. Also looking to center the Subscribe button and increasing the button size.

  • James Morris
    • WordPress Enthusiast

    Hello Matt,

    I hope you are well today. I'll be happy to help you with this issue.

    Doing a little bit of playing around with the Google Chrome DevTools, I've found the following CSS works fairly well. This takes into account the Site Reserved message, the Checkout form and the Submit button. It also takes into account mobile screens.

    @media only screen and (max-device-width : 768px){
    	.reserved_msg {
    		margin: 3em 1em 0 1em;
    	}
    	#gateways {
    		margin: 1em;
    	}
    }
    @media only screen and (min-device-width : 768px){
    	.reserved_msg, #gateways {
    		max-width: 768px;
    		margin:3em auto;
    	}
    }
    div#psts-stripe-checkout p {
        text-align: center;
    }
    #cc_stripe_checkout.submit-button {
        padding: 1em 5em 1em 5em !important;
    }

    Just add the above CSS to your theme's Custom CSS section and you should be good to go.

    Let us know if you have any further questions. We'll be happy to help! :slight_smile:

    Best regards,

    James Morris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.