[Support request] Paypal Button Size on Mobile

[John]

Hi!:

The PayPal button HERE (middle of the page) looks very small on a phone. What CSS do I need to enlarge it?

Thank you…

John

[Elvin]

Hi,

Your Paypal button has a inline CSS if width:25%; that cascades down to the mobile view.

We can try to override it by applies this CSS:

@media(max-width:768px){
form[action~="https://www.paypal.com/cgi-bin/webscr"] > input[name="submit"] {
    width: 50% !important;
}
}

[John]

Thank you, Elvin.

How would you handle the original PayPal button? When it was added to the page the button was too small so the following was added to the button code. Maybe it would be better to wrap the form in a div? What do you think?

input style="display: block; margin: 0 auto; width: 25%;" type="image"

[David]

Hi there,

if you’re adding the HTML to the site, then you would be better of adding a CSS class to the <input> element instead of adding inline styles eg.

<input class="paypal-button" type="image" src="url_obscurred" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

Then you can set your styles using CSS:

input.paypal-button {
    display: block;
    margin: 0;
    width:  25%;
}
/* Mobile styles */
@media(max-width: 768px) {
    input.paypal-button {
        width:  50%;
    }
}

[Author]

Posts