I’m having an issue using the new image choice field. I’m using it on two fields, in both cases to display a list of several options, of which the user would choose one (for one field) or multiple (for the other field).
I’ve successfully formatted the fields on both mobile and desktop, and for desktop I’ve used the ready class “gf_list_4col” to make the options appear in four columns, but I can’t figure out how to make the options appear as two columns on mobile. I’d have to make the options a bit smaller, as they’re too big/wide for two columns to be on the screen.
I’ve tried every css option I can think of, targeting everything I can think of, but I can’t figure it out. I can make the options smaller with transform:scale (imperfectly, I’d love another option there too - just “width:” doesn’t seem to work), but I can’t manage to then put the options in columns. I’ve tried “columns:2” and “grid-columns:2”.
Here’s how it looks with all changes made, including the resizing
Hey Brett Smith,
I understand you’re having trouble formatting the image choice field for mobile display, particularly getting the options to display in two columns while also making them smaller to fit properly.
Let’s tackle this issue systematically. The “gf_list_4col” class works well for desktop, but mobile needs different styling. Here’s what we can try:
For the mobile layout, you’ll need to use media queries to apply specific styling when the screen width is below a certain threshold. Since transform:scale is giving imperfect results and width isn’t working, we should try a different approach.
Could you share a bit of your HTML structure? or can you share the exact URL of the form page? That would help me target the correct elements. In the meantime, here’s a CSS approach that might work:
/* Target mobile screens */
@media only screen and (max-width: 767px) {
/* Target the container of your image choices */
.gform_wrapper .gfield.gfield_contains_required .ginput_container_imagechoice {
display: grid;
grid-template-columns: 1fr 1fr; /* Two columns of equal width */
gap: 10px; /* Space between items */
}
/* Target the individual image choice items */
.gform_wrapper .gfield.gfield_contains_required .ginput_container_imagechoice .image-choices-choice {
width: 100% !important; /* Force width to 100% of its grid cell */
transform: none !important; /* Remove any scaling */
}
/* Make the images themselves smaller */
.gform_wrapper .image-choices-choice-image-wrap img {
max-width: 90% !important;
height: auto !important;
}
}
This approach uses CSS Grid instead of the column property, which should give you more control. The media query ensures these styles only apply on mobile devices.
If you can share more details about your HTML structure, or you can share the exact URL of the form page? I can offer more tailored advice.
Adding both parts made the whole thing look weird, but just using the second part alone worked, thank you so much! I’ve been tearing my hair out over this for days, and you’ve been a tremendous help.
