Sizing Forms for Mobile

Ask the Community General Questions
,
1

I’m sure I’ve seen this somewhere before, but is there a way to have the same form sized for computer and phone, or do I need to have two separate forms?

https://www.rollingingolfclub.org/schedule.html

1 Like
3

Hello @Trainerw :wave:

I am so sorry that the widget isn’t displayed on mobile!

We’ll be happy to check things for you! To do this, we need some additional info that’s why I’ve contacted you at t***w@hotmail.com in a support ticket.

Please check your inbox.

We’ll be looking forward to your reply in a support ticket!

4

I guess I didn’t state the question properly. The form will work on my phone. My question relates to the different sizes of screen. Computer screens are horizontal and phones are vertical. I can create a 2 or 3 column form for the computer screen, but need a single line form for the phone. It would be the same content on each. I may be able to use an 18pt font on the computer, but need to have a smaller font on the phone. So, do I need to have separate forms for each?

5

@Trainerw I am sorry for misunderstanding!

Please try to add this CSS code to the Custom CSS field on the Appearance tab and let me know if it helped:

@media(min-width: 500px) {
  [class*="Choice__OptionsContainer"] {
  grid-template-columns: 30% 30% 30%!important;
}
}

@media(max-width: 500px) {
  [class*="Choice__OptionsContainer"] {
  grid-template-columns: 100%!important;
}
}
2 Likes
6

Thank you for your help. Don’t know what you did, but now I have three columns on the website and one column on the phone, but I have no control over the columns in the Forms app., Please put it back to default. I haven’t done anything with the code above.

7

I found it and removed it for now.

8

@Trainerw I am so sorry for the inconvenience!

It seems there was a miscommunication with the devs and they’ve added the code in advance.

If I understood you correctly, you wanted to have 2-3 columns on desktop and 1 column on mobile.

Could you please specify if I misunderstood you?

In case you’d like to keep 2 columns on desktop and 1 on mobile, you need to change 30% in the code to 50%:

@media(min-width: 500px) {
  [class*="Choice__OptionsContainer"] {
  grid-template-columns: 50% 50%!important;
}
}

@media(max-width: 500px) {
  [class*="Choice__OptionsContainer"] {
  grid-template-columns: 100%!important;
}
}
1 Like
9

Relax Max, this is not a big deal. As I was creating this form, I realized that if I created a two column form for the desktop, and used that same form for mobile, it would be two columns also. My question was, what if I wanted the same form for mobile, but only one column because of the screen size? Would I have to create two separate forms? Your custom code did the trick, I just couldn’t change the columns within the app. I’ll play with it now that I understand changing the percentages.

1 Like
10

@Trainerw Okay, I got it!

If anything comes up, please feel free to contact us.

Have a great day :slightly_smiling_face:

11

Thanks for all you do.

1 Like