Extend credit card row space to make a single file row

Hello,

If you look at the attachment, you will notice that credit cards are all jumbled together in a 2×3 block. We would like them to be displayed in one neat single file row.

I reached out to stripe and woocommerce, and they said it’s because the row area there is narrow and needs to be made wider via css code. I attached their response below as well.

Can you kindly provide some CSS code that will allow this space to become wider, so the cards can be presented neatly in a single file row please?

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the site URL. The site you provided earlier does not work correctly.

Best Regards

The two site urls are below.

Hello,

I am trying to add a product to cart to get to the checkout, however, the product is not added. Please deactivate all the plugins and check again to detect which one causes the problem.

Best Regards

Sorry, we had a blocker on for international visitors.

We turned if off temporarily. Try it now for the site below. Thanks.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .woocommerce .form-row-first,
body .woocommerce .form-row-last, 
body .woocommerce-page .form-row-first, 
body .woocommerce-page .form-row-last {
    float: none; 
    width: 100%;
}

Best Regards

Hello,

Please see attachment. The code did not work properly. It adjusted the actual credit card ‘form’ area, and extended the form boxes that you fill out. I would like to avoid altering these boxes, if possible. Thanks.

It did not adjust the width of the credit card area above it, so that the cards display on one single row.

Can you take another look please. Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Please have a look at the screen http://prntscr.com/n61km9 and clarify your purpose once again.

Best Regards

See attachment. We used photoshopped to create this image to show you.

We are trying to get the credit card images, to be aligned in a single file row.

They are currently in a block formation. Sorry for the confusion and I appreciate your help.

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the provided code with this one:

body .woocommerce-checkout .woocommerce-checkout-payment li.payment_method_stripe img{
	width:40px;
	height: auto;
	float:left
}

Best Regards

Wonderful. It Worked. Thank you for your help, I really appreciate it.

Please close the ticket

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts