Payment Check Out


#1

Hello guys,

Bug 1. I’ve been trying to find a CSS code to make the stripe gateway credit card payment cart mobile friendly however I’ve had to success yet.

The cart looks great on desktop but it looks distorted on mobile devices which ins’t great. Do you know a fix for it?

PS - I’VE ALREADY CONTACTED STRIPE SUPPORT. THEY DID SOME TESTS AND IT LOOKS AS THERE’S AN ISSUE WITH SYDNEY CHILD THEME ON MOBILE DEVICES.

I really appreciate your support.

Mauro


#2

Hello Mauro,

  1. Can you please provide some explanatory screenshots?

  2. Please create a new topic for your second issue to keep forum in good order and make it easier to help you.

Kind Regards, Roman.


#3

Hello Roman,

Thanks for getting back to me.

As you can see on the photo, the credit card payment table is not wide enough to display the content on mobile devices. The card flags and the card number box don’t display well the data.

It works perfectly on desktop though. I tried various types of CSS code however I have not being able to fix it yet.

Kindly regards.

Mauro


#4

Hello Mauro,

I’ve just checked that form and it doesn’t look like a theme issue (I didn’t notice any conflicts), it seems like that form mobile view has to be polished. But it looks like this issue requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.


#5

Hello Roman,

Thanks very much for your time.

Kharisblank sent me the ideal CSS code to fix it which is that one:

@media only screen and (max-width: 599px) {
      .woocommerce-checkout #payment ul.payment_methods {
        padding-left: 0;
        padding-right: 0;
        width: calc(100% + 115px);
        width: -webkit-calc(100% + 115px);
        width: -moz-calc(100% + 115px);
        margin-left: -45px;
      }
      
      .woocommerce-checkout #payment div.payment_box .form-row {
        margin-left: 5px;
        margin-right: 5px;
        padding-left: 0;
        padding-right: 0;
      }
    }

#6

You are welcome Mauro, thanks for sharing it!

Kind Regards, Roman.


#7