SIGN UP

Radio image options that show in the correct aspect and stack properly...

By: Ian Forest | Asked: 08/22/2022
Forums › Category: How-to › Radio image options that show in the correct aspect and stack properly...
Vote Up 0 Vote Down
Ian Forest asked 2 years ago

What i'm trying to do is simple (I think) but it seems to be so difficult on any form platform, not just FF...
I am creating a form that uses radio image options extensively.  All the images are in the aspect ratio of 3:2.
FF radio image options are all square by default.
Problem 1
I want all my images to display in the correct ratio, and stack also in the correct ratio at different breakpoints.
Problem 2
My desktop container width is 1280px...is it too much to ask for the image options to display in 4 columns across the full width of the container?
I was given some CSS by FF which kind of gets them in the correct aspect ratio but if I changed the size from medium to small then it all screws up.  Here is the code I was given...

.frm_checkbox.frm_image_option, .frm_radio.frm_image_option {
width: 30% !important;
}

If anyone can help that would be fantastic, thank you.
A sample URL is https://23.bigsmilebooth.com/options2

2 Answers
Vote Up 0 Vote Down
Bobby Clapp Staff answered 2 years ago

Try this:

.frm_image_options .frm_opt_container {
display: flex !important;
}

.frm_checkbox.frm_image_option, .frm_radio.frm_image_option {
flex-grow: 1;
}

Then define your breakpoints and have this:

.frm_image_options .frm_opt_container {
width: 100%;
}

Vote Up 0 Vote Down
Ian Forest answered 2 years ago

Ok so this is the code I am now using and whilst it now expands across the container, the image aspect is still square.  On a phone (iPhone 13 pro max) the options show in 2 columns instead of stacked in one column...

.frm_image_options .frm_opt_container {
	display: flex !important;
}
.frm_checkbox.frm_image_option, .frm_radio.frm_image_option {
	flex-grow: 1;
}

@media only screen and (max-width: 500px) {
	.frm_image_options .frm_opt_container { width: 100%; }
}

Very bizarre!
The live page is now here by the way as I put the website live this morning...
https://bigsmilebooth.com/options2
Thank you for your help.  I'm not sure why this is so difficult...and it's not only linked to FF, happens in almost all the form plugins I've tried...and there have been a few!!!  I may have to look at doing this some other way maybe...

Bobby Clapp Staff replied 2 years ago

It depends on the aspect of the screen you are viewing it from. The flex is dynamic so it will look different on different devices. On my 1920x1080 screen I see a 3:2 type of image. Everything looks good as well on my IPhone XR in portrait. It gets a little square looking in landscape. You'll have to code media for each scenario you require a particular need for.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right