A number of people have difficulty getting their PayPal buttons to size properly when embedding the PayPal script into blog posts or pages. This typically happens with responsive themes.
There are a couple of reasons why this happens. Inside the stylesheet (style.css), if you look for input, select, textarea you will see that the width may be set at 100%. Or, you may look for img and that may be set at 100%.
PayPal’s script uses the input function. To add your PayPal form script for your buttons, you can wrap your code in a div with a class. Just select the “Text” tab in the post editor. Copy and Paste this code. Insert your form script where indicated.
| <div class="paypal-button">INSERT YOUR PAYPAL FORM CODE HERE</form></div> |
To reduce the image size, you would then add the following code to your style.css file or to your Custom CSS box.
| .paypal-button form { | |
| width: 171px; | |
| } |
To increase or decrease the size, modify the width on Line 2. It will then look like this.
Another way to add the PayPal button without creating the span and custom CSS would be to use one of their official button images here, then link that image with the URL of your PayPal button.
That’s it!
Did you find this blog or tutorial helpful?
Like my Signature? Get the Signature Widget for Genesis right here!