- August 21, 2022 at 3:41 pm #34623
I am trying to use images instead of radio buttons.
I have followed some CSS found here, and whilst it works ok, I want to move the option label to the OUTSIDE of the image, directly underneath it, left aligned, rather than on a gradient inside the image.
The form is located at https://23.bigsmilebooth.com/options
Can anyone help, please?
August 22, 2022 at 1:59 am #34625AllanSupport StaffAugust 22, 2022 at 6:24 am #34627
- This topic was modified 1 year, 3 months ago by ianforest.
Hey Allan, thank you for your help much appreciated. Doing this has created a new problem however…
When I select an image, the text underneath now shifts over to the right…
This is the CSS I am using for “option text”
And the only style for anything selected I am using is “option label (when selected)” and this is for styling the check icon that appears inside the image…
border: 5px solid rgb(137, 199, 18);
box-shadow: 0 0 15px rgba(137, 199, 18, 0.2), inset 0 0 15px rgba(137, 199, 18, 0.2);
Thank you for your help.August 22, 2022 at 10:08 am #34629AllySupport StaffAugust 22, 2022 at 12:14 pm #34630
Perfect, thank you so much! All seems to be ok.
I also have a couple of other queries…
When I look at the form I’ve created with a phone or tablet, even though the images are stacked, because I’ve specified a height in the image options, they all appear at that height.
Ideally, I need them all to show in the correct ratio which is 3/2.
Is there anything I can do so that they resize all automatically in the correct ratio irrespective of what device is being used to view them?
Thank you.August 25, 2022 at 12:09 am #34644
- You must be logged in to reply to this topic.