More Room For Payment Buttons?

[koryb1]

We're adding PayPal Credit as a payment option to our ShopSite site. This now gives us 4 payment options total - Secure Checkout (Credit Cards), PayPal, PayPal Credit, and Pay with Amazon.

I'd like to stack all 4 of the payment buttons vertically (Secure Checkout first, followed by the text "or use" followed by the other 3 buttons). However, in the Arrange Buttons section (Commerce...Payment Setup) there isn't enough room in the window to place them all in this fashion. Is there a way to make this window taller?

I know instead of the vertical arrangement I could use 2 rows of 2 buttons each. That doesn’t work for us as our Secure Checkout button is taller than the other 3 buttons (we want to keep it that way), and when two buttons are placed side by side the one on the right gets cropped off on mobile devices.

If you have a tip on making this window taller so everything can fit I'd greatly appreciate it. Thanks in advance!

[ajeffery]

You can press F12 (browser developer tools), select this box (element id CBP_container) and adjust its height in CSS.

Please note that we've added a WO to make the box taller in the next version. In the meantime, the best workaround is the manual adjustment mentioned above.

[koryb1]

That's a very cool trick! I was never aware of live css edits. It took me a little persistence to figure it out but this did the trick. I really appreciate the tip!

Thanks so much!