Radio buttons with images, horizontal layout, makes a mess

I was able to format these to form columns with this CSS, after adding the class “form-flex-column” to the radio group:

.form-flex-column .forminator-field {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.forminator-ui#forminator-module-40381.forminator-design--default .forminator-has_image {
    display: flex;
    flex-direction: column;
    flex-basis: 45%;
    margin-bottom: 70px;
    padding-top: 50px;
}
.forminator-ui.forminator-custom-form[data-design=default] .forminator-has_image {
    -webkit-box-align: unset !important;
    -ms-flex-align: unset !important;
    align-items: unset !important;
}
.forminator-has_image .forminator-radio-bullet {
    margin-left: 150px;
}
.forminator-has_image .forminator-radio-label {
    margin-left: 180px !important;
    margin-top: -20px !important;
}

However, this is very funky. I had to unset the flex align for the forminator-ui, which centered the label, unlike when the layout is vertical. (Wouldn’t allow a “left” flex alignment.) Then I had to put margins on the radio bullet and label, including a “-20px” top margin on the label to get it up to the same row as the bullet. Why don’t they line up like they do when the layout is vertical for the radio group?

• This reply was modified 1 year, 2 months ago by jamminjames. Reason: Found some CSS that helps

Hi @jamminjames

I hope you are doing well today.

As you added already some css fix to the site, are you able to create a staging site, remove that fix from there and share a link to page where form is located to see main issue?

Also, apart from that, please export your form, upload it to google drive and share a link in your next reply so that we could review this form on our side.

Kind Regards,
Kris

Thanks for the reply. Here’s the page on the staging site. I hope it doesn’t redirect to our live site, as it was doing for me. I had to open up the page view from the backend to see it. I saved a screenshot of it along with the form export, here.

Hi @jamminjames,

Hope this message finds you well and thanks for reaching us.

Unfortunately, the staging is not working, as your end is redirecting us to the live site. However, I was able to import your form and replicate the issue. I did ping our developers about this, we will back to you once we get a reply from them.

Best regards,
Laura

Hi @jamminjames

We haven’t heard from you in a while, I’ll go and mark this thread as resolved based on our email conversation. If you have any additional questions or require further help, please let us know!

Kind Regards,
Kris