Radio Button Alignment


#1

radiobuttonalignment

May I know if there is any quick fix for this button alignment? I am using Perth Pro themes, the responsive theme. No matter how I rescale the size of the windows, the button and the text still remain overlapped.

Thanks in advance.


#2

Hi,

Please post a link to your website, so I can check.

Kind Regards,
Csaba


#3

after adding products into the cart, and you can find it in the shipping options.


#4

Hi,

You can fix that overlap issue with this Custom CSS:

#shipping_method label {
    margin-left: 25px !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba


#5

Thanks Csaba,

I couldn’t find the corresponding Child Theme from Athemes, I assuming I need to create one for my own, right?


#6

Hi,

Yes, you can create a Child Theme easily by using a plugin like this one: https://wordpress.org/plugins/child-theme-configurator/ but if you just do CSS changes you can use wp-admin -> Appearance -> Customizer -> Additional CSS, then the Child Theme isn’t needed.

Kind Regards,
Csaba


#7

Hi Csaba,

It works beautifully. thank you so much. May I know how to find the label name for those I need to apply this fix? I have other 2 check box that also have overlap issue.


#8

Hi,

You can fix the checkboxes overlap too with this Custom CSS:

.woocommerce form .form-row .input-checkbox {
    margin: 8px 0 !important;
}

.woocommerce form .form-row .woocommerce-form__label-for-checkbox span {
    margin-left: 18px !important;
}

Please let me know how it works.

Kind Regards,
Csaba


#9

awesome, it works! thank you so much.


#10

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba


#11