Align the terms and condition box

Hello guys,

I’ve been trying to find a CSS code to align the terms and condition text with its box however nothing has worked so far.

Could you help me to fix it please?

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

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .wc-terms-and-conditions .woocommerce-form__label-for-checkbox .input-checkbox {
      margin-top: 10px !important;
    } 

Regards,
Kharis

Hello Kharisblank,

That’s just brilliant, thanks for your support.

The CSS code worked perfectly.

Wishing you a lovely weekend.

Mauro

You’re welcome Mauro!

Have a nice weekend to you too!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Good evening Kharisblank,

I am sorry to disturb you.

I actually need help with one final thing.

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.

By any chance you have faced the same issue?

Kindly regards.

Mauro

Hello there,

To enlarge it on smaller screen, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @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;
      }
    } 

Let me check it on my test site, and will report it to our developer to fix it permanently if I get the same issue.

Regards,
Kharis

Hello Kharisblank,

It’s definitely an improvement from the previous CSS settings.

The table looks wider, more mobile friendly.

Thanks again for your help.

I will play with your code, trying to adjust it a bit better.

Wishing you a wonderful week.

Mauro

Great!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Have a nice day to you!

Regards,
Kharis