[Support request] Paypal Button Size on Mobile

Home Forums Support [Support request] Paypal Button Size on Mobile

Home Forums Support Paypal Button Size on Mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1604330
    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

    #1604381
    Elvin
    Staff
    Customer Support

    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;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1605081
    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"

    #1605094
    David
    Staff
    Customer Support

    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%;
        }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.