Altering the size of label boxes

I’ve currently got a few variations displayed as text labels but due to the amount/character length, some of them fall over onto a second line on the frontend product page.

As a workaround I have reduced the text size to 0.65rem but this isn’t ideal for the UX and on a couple of products, I’m still seeing attribute labels spill over.

What I want to do is alter the padding, but all the custom CSS I’m trying is breaking the relative width of the label box to the text.

Example:

.variable-items-wrapper .variable-item.button-variable-item span {
  font-size: 1rem;
  line-height: 1;
}

.variable-items-wrapper .variable-item.button-variable-item {
  padding: 1px;
  margin: 2px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

The above forces the boxes into a rigid square regardless of the length of text in the label.
Do you have an alternative snippet of CSS that I can use to remedy this?

• This topic was modified 7 years, 2 months ago by printpunkuk.