How to make Custom PayPal button responsive

#1

Hello all.

I am using s2Member PRO.

This is the code that I am using for all my S2Member PayPal buttons (custom image):

1 Week Membership $2

[s2Member-PayPal-Button modify="1" level="1" ccaps="" desc="Upgrade to a 1 Week Membership / 7 Days Access / Non-Refundable" ps="paypal" lc="" cc="USD" dg="0" ns="1" custom="" ta="0" tp="0" tt="D" ra="2" rp="1" rt="W" rr="BN" rrt="" rra="1" success="https://www.domain.com/success/" image="https://www.domain.com/wp-content/uploads/paypal-checkout-upgrade.png" output="button" /]

Full Year Membership $50

[s2Member-PayPal-Button modify="1" level="3" ccaps="2015pi" desc="Upgrade to a Full Year Membership / Non-refundable" ps="paypal" lc="" cc="USD" dg="0" ns="1" custom="" ta="0" tp="0" tt="D" ra="50" rp="1" rt="Y" rr="BN" rrt="" rra="1 "success="https://www.domain.com/success/" image="https://www.domain.com/wp-content/uploads/paypal-checkout-upgrade.png" output="button" /]

Monthly Membership $3

[s2Member-PayPal-Button modify="1" level="2" ccaps="2015pi" desc="Upgrade to a Monthly Membership - recurring at $14.99/mo" ps="paypal" lc="" cc="USD" dg="0" ns="1" custom="" ta="0" tp="0" tt="D" ra="3" rp="1" rt="M" rr="1" rrt="" rra="1" success="https://www.domain.com/success/" image="https://www.domain.com/wp-content/uploads/paypal-checkout-upgrade.png" output="button" /]

The above is showing up fine on a regular screen but the PayPal buttons are not getting smaller on a small screen (iPhone).

Here is a screenshot of what it looks like on a smaller screen:

Can someone please help me out with this…??

Thanks in advance.

#2

Can you post here the link to your website?

#3

Here is the link. [redacted]
username: [redacted]
p/w: [redacted]

Appreciate the response.

#4

Sorry that I didn’t reply earlier, I must have missed the notification.

All your styles are written directly into the code instead of keeping them in separate CSS files. I would recommend elaborating on this; I’m sure it will help to keep your code clean and more flexible in the future.

Also please note that this is not a problem caused by s2Member. If you want to display the three boxes pretty on phones, please move all the inline style into CSS files as I suggested.

In the picture below I highlighted what style you should add for the buttons to keep them in the boxes.

Screen Shot 2017-05-16 at 12.51.38.png733×776 123 KB

#5

Hello andrejstas.

Thank you for your response.

I understand what you did to make it work. Much appreciated.

But the weirdest thing is that I am pretty sure that I have not added any of those custom CSS rules for the “img” element. I thought those are being generated by the S2Member shortcode. I do not even know where or how I would customize those shortcodes.

Do you have any idea how they are getting inserted…??

All the best.

#6

In theme’s CSS file. If you have a child theme, in the CCS of child theme. If your theme have a way to set “custom CSS”, use it.