Help with radio buttons on checkout wrapping

How To
4

So these lines of code by core_framework seem to create the issue (especially the fixed sizes):

.radio {
  appearance: none;
  display: grid;
  place-content: center;
  border: 2px solid var(--dark-40);
  border-radius: var(--radius-full);
  width: clamp(1.8rem,calc(0.37vw + 1.68rem),2.2rem); // fixed width
  height: clamp(1.8rem,calc(0.37vw + 1.68rem),2.2rem); // fixed height
}

These stylings are used to create the custom radio buttons, but it is not working for your setup.

I’d suggest you do something like this, and from there on out you can maybe recreate the cusom radio buttons if you need them:

#gift_checkout_field .radio {
	margin-bottom: unset;
	height: auto;
	width: auto;
	display: unset;
	border: unset;
	border-radius: unset;
}

.woocommerce-input-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

#gift_checkout_field {
	accent-color: var(--primary);
}

Cheers Suat

1 Like