CODEWITHSUNDEEP
htmlcsspaypalpositioningsquarespace
user3533336
user3533336

Reputation: 1

Attempting to Position A PayPal Button Using CSS

I am attempting to position a PayPal button directly underneath my store's 'Add To Cart' button. I am using Squarespace which is not fully integrated with PayPal so I have to generate the button externally and put them on the page in the 'Additional Information' block, which unfortunately, pushes it down below the product image. I've tried tweaking the CSS to bring the entire block up to sit underneath the 'Add To Cart' button but it doesn't display properly on Mobile.

One of the pages I'm attempting to do this on: https://jessica-oakes-gdrz.squarespace.com/shop/headbands

Upvotes: 0

Views: 1823

Answers (1)

KeithWM
KeithWM

Reputation: 135

You could wrap your button in a div as seen below:

<div class="paypalbutton">
<a class="checkoutbutton" href="#more-info">Add to PayPal Cart</a>
</div>

Then use the following CSS. Align left for desktop browsers, and set a breakpoint at 768px or similar and then set align to center for mobile display.

.paypalbutton{
    text-align:left;
}

@media screen and (min-width:341px) and (max-width:768px) {
    .paypalbutton {
        text-align:center;

    }

}

Hope it helps. K

Upvotes: 1

Related Questions