Image select radio buttons

Home Forums Quform WordPress Image select radio buttons

This topic is: not resolved
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #34623
    ianforest
    Participant

    Hi there,

    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?

    • This topic was modified 1 month, 2 weeks ago by ianforest.
    #34625
    Allan
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #34627
    ianforest
    Participant

    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”

    position: absolute;
    bottom: -40px;
    padding-bottom: 5px;
    text-align: left;
    text-transform: uppercase;
    font-weight: 900;
    color: #000;
    font-size: 15px;

    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.

    #34629
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #34630
    ianforest
    Participant

    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.

    #34644
    Allan
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2022 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy