How can I make the images of the Image Radio Buttons to look exactly the same as Image Checkboxes?

Hi,

For the life of me, I cannot figure out how to display the widget on this form:  https://form.jotform.com/80150964017250 fully.

It cuts after the first image.

Also, I'd like to mimic the same look on a image radio button widget too, but when I try to copy the css onto the second widget on the page, it doesn't affect it.
I need your help resolving this please.

Thanks!

PS: you can edit directly on that form; I set it up for testing. Thanks!

Let me rephrase as my question is long for no good reason;

on that form, I have a checkbox and radio box image widget. I want the radio box to look like the checkbox... unable to make it happen. My css variables may have mistakes in them. Could you kindly help me correct them?

I have added the CSS code below on the Custom css area of the Image Checkbox widget:

li {

    width: 80px !important;

}

li img {

  width:100% !important;

}

Please let us know if this wasn't your question. 

No. Must have misunderstood.

I returned everything the way it was.

The TOP widget (image checkbox) is fine the way it is now, except for the fact that it cuts off in height when viewed.

The bottom widget (image radio box) is not fine. I want it to look like the top widget.

I apologize about that. Please check your form now. I made modifications needed so they can look the same.

Please let us know if you have any other question.

So far so good... just an issue with the size of the text (image labels) if you compare the 2 widgets; one text is too small in comparison. How can I rectify this? Thanks!

I've fixed it by injecting the following custom CSS codes in the widget:

#images_button_container label span {

    font-size: 16px !important;

}

That helped. Thank you Welvin