Fabian Pontén replied 2 years ago

Hi Victor! Thanks for your response. I'm aware I need custom CSS, just couldn't figure out how to do it 😊 When I change the width of the images to % instead of fixed px the layout breaks.

Victor Font replied 2 years ago

Are you familiar with CSS Flax? If you look at the HTML Formidable generates, image based checkboxes and radio buttons are displayed as inline-flex. Each image is its own glex box within the inline-flex. Flex does not respond to the fixed width dimensions we might use otherwise for images. The HTML won't display here, so use your browser's inspection tool to examine the radio button HTML as I continue to describe the elements and flow.

The individual radio button code has 3 flex boxes it is displaying within the inline-flex container.. From the top down, the first div with the "frm_image_option_container frm_label_with_image" CSS classes is the flex container. Every element at the immediate child level is an individual flex box within this container.

The second div with the class "frm_selected_checkmark" is the checkmark flex box that displays in the upper left corner of the image when you click to choose it. The second flexx box is the image and the third is the nexted span with the option label.

The inline flex is instantiated in the .frm_image_options .frm_image_option_container class. Flex boxes can be set to a fixed with be adjusting the flex-basis, flex-grow, and flex-shrink properties. This article may help: <a href="https://usefulangle.com/post/351/css-flex-fixed-width-item&quot; rel="nofollow">https://usefulangle.com/post/351/css-flex-fixed-width-item</a&gt;

Fabian Pontén replied 2 years ago

Thanks a bunch Victor, will review your suggestions and see if I can figure it out, thanks!