Image Choice formatting

Ask the Community Customization
1

Hi, on a form, I’ve used mainly ‘Image Choice’ block.

Where there are only two options available, these are scaled to the width of the form and appear bigger, than if there are three options. You can see an example when you select ‘Antique Brass’ on ‘Sockets and Switches’: Fixtures form — Red Sky Shepherds Huts

Is it also possible to have four options on one line rather than spill down onto two lines?

1 Like
3

Sure! You just should increase the width of the widget and the 4 images will be displayed in line :slightly_smiling_face:

image
image1483×735 98.2 KB

4

Thanks Max! Here’s the form now: Fixtures form — Red Sky Shepherds Huts

I’ve got the width wide enough to hold 5 images, but if there are less than 5 options available, the images appear larger to fill the width. It results in a slightly uneven appearance.

Is there a way to make the images all the same size, even when there are less options?

Thanks

1 Like
5

Sure, please use this code in the Custom CSS field on the Appearance tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

@media (min-width: 480px) {
  [class*="ImageOption__Item-sc"] {
    max-width: calc(20% - 6.2px);
    min-width: 150px !important;
  }
}
2 Likes
6

Amazing - it looks great! Thank you so much.

2 Likes
7

Awesome, you’re most welcome!

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 6-month extension for your subscription - May Contest: Create a Caption for Our Photo and Win 6 Months FREE! :rocket:

Check the details and join in :wink: