Home › Forums › Basel support forum › Extend credit card row space to make a single file row

Extend credit card row space to make a single file row

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 31, 2019 at 4:14 pm #116028

    ochow7
    Participant

    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.
    March 31, 2019 at 6:06 pm #116047

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    March 31, 2019 at 6:08 pm #116048

    ochow7
    Participant

    The two site urls are below.

    April 1, 2019 at 6:32 am #116106

    Elise Noromit
    Member

    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

    April 1, 2019 at 6:49 am #116112

    ochow7
    Participant

    Sorry, we had a blocker on for international visitors.

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

    April 1, 2019 at 1:25 pm #116193

    Elise Noromit
    Member

    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

    April 1, 2019 at 2:52 pm #116227

    ochow7
    Participant

    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.
    April 1, 2019 at 6:42 pm #116278

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    April 1, 2019 at 6:50 pm #116283

    ochow7
    Participant

    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.
    April 2, 2019 at 7:36 am #116362

    Elise Noromit
    Member

    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

    April 2, 2019 at 3:04 pm #116464

    ochow7
    Participant

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

    Please close the ticket

    April 2, 2019 at 4:38 pm #116485

    Elise Noromit
    Member

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

    Best Regards

  • Author
    Posts

Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)