PayPal Button Oversized and Stretched Out

Hi, your issue is probably coming from your theme. To test this theory, please test one of WordPress default themes like Twenty Nineteen.

In your current themes the following CSS code is what you need to adjust. I added a note next to the width: 100% value. Simply adjust to your liking. For example: Try the following width: 40%.

.paypal-button {
    border: 1px solid transparent;
    border-radius: 0 3px 3px 0;
    position: relative;
    width: 100%;  <== you need to adjust this amount
    box-sizing: border-box;
    border: none;
    vertical-align: top;
    cursor: pointer;
    overflow: hidden;
}

And the following code as well.

input, select, textarea {
    display: block;
    width: 100%;  <== you need to adjust this amount
    font-family: inherit;
    font-size: 1rem;
    height: 2.5rem;
    outline: 0;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 3px;
    box-shadow: none;
    padding: 0 12px;
}

Let me know if the above helps you.

Thank you

Is there a specific place I need to paste those 2 codes? Or can I copy and paste those 2 codes at the end of the original PayPal code? I’m sorry I’m not too familiar with how this works.

Hi, please check the following tutorial.
https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

Let me know if the above helps you.

Thank you

Thank you for that! I was able to figure out how to put the code in. It changed the size of the button but still had that stretched out smashed look to it!

Hi,

Add the following custom CSS code below. I adjusted the width: to 20%. You currently have it at 90% which is why it looks stretched.

input, select, textarea {
    display: block;
    width: 20%;
}

Let me know if this works.

Thank you