Return to previous page

Stripe Gateway Alignment Problem - by Keywahn

This topic has 9 replies, 4 voices, and was last updated 9 years, 8 months ago ago by Eva Kemp

Keywahn

Participant

April 25, 2016 at 17:01

Hi there. We’ve just added the Stripe gateway to our site and there was an issue with the alignment of the Card Number, Date and CVV boxes. However, on checking the forum we entered the following code provided by Eva Kemp which has solved the issue of the alignment of the boxes but it has caused an issue with the PayPal option alignment. Here’s the code we added:

.payment_methods p {
margin-left: 0;
width: 200px !important;
float: left !important;
}

I’ve attached a screenshot of the checkout page showing the alignment issue below. Can we do anything about this? Also as the code was just Custom CSS for desktop, the initial alignment issue is still a problem on mobiles and tablets.

Here’s the link to the screenshot of the issue:

http://awesomescreenshot.com/0275tjn848

Many thanks.

#122839 Copied

8 Answers

Eva Kemp

Participant

April 25, 2016 at 17:50

Hello,

Please show a site where the issue persists and provide wp-admin panel credentials.

Thank you.
Regards,
Eva Kemp.

#122853 Copied

Keywahn

Participant

April 26, 2016 at 11:18

Hi Eva. I’ve activated the gateway again but I’ve removed the code so that you can see how the checkout page looks. I’ve attached the admin details below.

Kindest regards,

Kevan

Please, contact administrator
for this information.

#122926 Copied

Jack Richardson

Support staff

April 26, 2016 at 11:44

Hello,

As I see payment methods are shown properly http://storage6.static.itmages.com/i/16/0426/h_1461667504_7099818_a6c7c1611b.png .
What browser are you checking in?

Best regards,
Jack Richardson.

#122935 Copied

Keywahn

Participant

April 26, 2016 at 11:49

Hi Jack,

Thanks for getting back to me. If you click on the Stripe button you will see the alignment issue.

Many thanks

#122937 Copied
Robert Hall

Participant

April 26, 2016 at 12:02
Hello,

Please try to add this code in Global Custom CSS.

.woocommerce-checkout .payment_methods p { margin-left: 0px; }

Regards,
Robert Hall
#122941 Copied
Eva Kemp

Participant

April 26, 2016 at 12:11
Hello,

Please add this code in Theme Options > Custom CSS > Global Custom CSS:

.payment_box.payment_method_ei_stripe p { margin-left: 0 !important; }

Regards,
Eva Kemp.
#122944 Copied
Keywahn

Participant

April 26, 2016 at 12:12

Perfect!

Thanks Robert

#122946 Copied

Eva Kemp

Participant

April 26, 2016 at 12:29

Hello,

You’re welcome.

Regards,
Eva Kemp.

#122950 Copied
Viewing 9 results - 1 through 9 (of 9 total)