Horizontal on desktop and vertical on mobile

Hello @marcusabs

Hope you’re doing well today! Thank you for reaching out to us.

It seems at the moment the first radio field is set to “horizontal” layout and the rest of the radio fields are set to a “vertical” layout.

In this case, I would recommend you to navigate to each radio field >> settings and set it to “Horizontal layout”.

To arrange the radio fields in a vertical layout only for mobile, please follow the steps below:

Step 1:
Edit each radio field >> navigate to the styling tab >> add a custom class, please make sure to use the same custom class for all the radio fields. Please refer to the screenshot below
https://monosnap.com/file/MeSXHCIyX2Bvp3wjM2u1WzkXEYDsOq

In the above example, I have set custom-mobile as a custom class.

Step 2:
Please apply the below CSS by navigating to the WP Admin >> Appearance >> Customize >> Additional CSS

@media screen and (max-width: 600px) {
.custom-mobile > .forminator-field {
        display:grid !important;    
}
}

Let us know how it goes.

Kind Regards,
Saurabh

Hi thank you for the answer. I already have a custom class for another feature so can I add another?

Alsi I use elementor, any better way to insert the code?

Best regards, Marcus

Hi @marcusabs,

I already have a custom class for another feature so can I add another?

Yes, you can add another class separated by a space, and that should work fine. Alternatively, you can replace the class in the provided CSS with your existing class name.

Alsi I use elementor, any better way to insert the code?

You can add custom CSS on an Elementor page through the Advanced tab in the page settings. I hope the following guide is helpful: https://elementor.com/help/how-to-add-custom-css/

I hope that helps.

Kind Regards,
Nebu John

Thank you for the answer. I seperated the class with a space and inserted the code under the advanced time but nothing happened. I only tried with the first from-questions.

Do you have something else?

Br. Marcus

I just checked the form on mobile and it seems like it’s only the first 3 questions where it’s not vertical. You can check the the form on the frontpage on mobile.

Br. Marcus

Hi @marcusabs,

I hope you are doing well today!

The issue seems to be related with the font sizes. Please try adding the following code to your additional CSS.

@media screen and (max-width: 600px) {
.forminator-ui#forminator-module-2005.forminator-design--default .forminator-radio {
    font-size: 18px !important;
}
}

If you also need to increase the font for the Questions you can also achieve this by adding below instead.

@media screen and (max-width: 600px) {
.forminator-ui#forminator-module-2005.forminator-design--default .forminator-label {
    font-size: 18px !important;
}
.forminator-ui#forminator-module-2005.forminator-design--default .forminator-radio {
    font-size: 18px !important;
}
}

Kind regards,
Zafer

Hi,
Thank you for trying to help. The code didn’t work.
Do I have to change all the forms to horizontal before applying the code?

I inserted the code in forminator under “Appearance”

Hi again @marcusabs,

Please try adding the mentioned CSS code to your WP Admin Dashboard -> Appearance -> Customize -> Additional CSS section. Please also try with larger values such as 20px and let us know the results.

Kind regards,
Zafer

Thank you, it worked, but unfortunately not on all of the question. Number 4 question as an example doesn’t work.

What to do now?

• This reply was modified 2 months, 3 weeks ago by marcusabs.

Hi @marcusabs,

Please try the following CSS:

@media screen and (max-width: 600px) {

	.forminator-ui#forminator-module-2005.forminator-design--default .forminator-radio {
		margin-right: 30% !important;
	}

}

You can add the CSS via the Customizer as directed before.

Please do check and let us know how that goes.

Kind Regards,

Nithin

Thank you! It works now.

I just added the code, I didn’t replace it. Hope that’s the right way to do it?

I have one more request. On desktop, question number 3 is the only question that skips a line. Anyway to make it be on the same line (horisontal)

Br. Marcus

Hi @marcusabs,

Hope that’s the right way to do it?

Yes, correct. Its a new CSS which needs to be added.

On desktop, question number 3 is the only question that skips a line. Anyway to make it be on the same line (horisontal)

This occurs because of long labels and hence it moves automatically to the next line.

What could be achieved using CSS is limited since the behaviour is expected due to the length of the labels added. The easiest solution would be to check the possibility of shortening the label for 3rd question, is that possible?

Other than that the possible workaround is to reduce the font size, so it would fit within the container, however, such an action will make the font very small and non-readable ie around a font size of 9px which is very small, another option is to increase the width of the form for desktop mode.

Please do check and let us know how you want to move ahead so that we can see if there is any new CSS that could be suggested.

Kind Regards,

Nithin

Hi @marcusabs

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

Kind Regards,
Kris