Customizing the Button Radio widget

Hello.... I was informed that the Button Radio Widget and the way it renders can be adjusted via CSS, but I'm unclear as to how much customization can be accomplished.

Let's start with text elements... can we get the text to line-break so that the price rests below the frequency as shown in the pick?  I tried doing it within the General Widget Settings as seen in the pic, but using html edits/elements don't work.

WHAT I'M GOING AFTER....

WHAT I TRIED ... BUT IT DIDN'T WORK....

Is a line-break, bold and font-size able to be used or adjusted within this widget?

Thanks.

I have tried, but I was not able to get the text to line-break with CSS and I am not sure if that is possible considering that widget is loaded inside of iFrame. It is possible to bold the text and change font size.

You can add this CSS code to the widget Custom CSS tab to bold text and increase font size:

.radios input + label span {

    font-weight: bold;

    font-size: 14px;

}

Considering that you have images of options that you want to use, you can use Image Radio Buttons widget.

Let us know if you need further assistance. 

Thank You BJoanna!

Image Radio Buttons I don't think will work as I would have to create a image to account for each individual Price-point.... upwards of 52.... and then I think I'd have the same issue I will now ask you about regarding these button radios.... RESPONSIVENESS.

Regardless of the number of columns and box/cell size, I will need the cells to auto-adjust to fit the screen size. My current setting is 2 columns, with a Width of 220. Is this doable?  I realize I may have to reduce my font-size to a set standard, but I'm okay with that... as long as the cells / buttons can auto adjust.

the webpage I am testing this out on is https://themaidcrew.com/sandbox2 

A custom CSS needs to be added to adjust the responsiveness of the widget on mobile devices. I will figure it out and let you know.