# Sizing Forms for Mobile

**URL:** <https://community.elfsight.com/t/sizing-forms-for-mobile/13951>\
**Category:** General Questions\
**Tags:** form-builder, contact-form\
**Created:** [March 23, 2023, 12:39am UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951 "2023-03-23T00:39:11Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trainerw](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/trainerw/32/2454_2.png) [@Trainerw](https://community.elfsight.com/u/Trainerw)\
**Post date:** [March 23, 2023, 12:39am UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951/1 "2023-03-23T00:39:11Z")

</div>

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](https://www.rollingingolfclub.org/schedule.html)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 23, 2023, 12:21pm UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951/3 "2023-03-23T12:21:32Z")

</div>

Hello @Trainerw 👋

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!

---

<div class="post-metadata">

**Author:** ![Trainerw](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/trainerw/32/2454_2.png) [@Trainerw](https://community.elfsight.com/u/Trainerw)\
**Post date:** [March 23, 2023, 12:47pm UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951/4 "2023-03-23T12:47:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 23, 2023, 2:12pm UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951/5 "2023-03-23T14:12:48Z")

</div>

@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:

```auto
@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;
}
}

```

---

<div class="post-metadata">

**Author:** ![Trainerw](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/trainerw/32/2454_2.png) [@Trainerw](https://community.elfsight.com/u/Trainerw)\
**Post date:** [March 23, 2023, 4:38pm UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951/6 "2023-03-23T16:38:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trainerw](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/trainerw/32/2454_2.png) [@Trainerw](https://community.elfsight.com/u/Trainerw)\
**Post date:** [March 23, 2023, 4:50pm UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951/7 "2023-03-23T16:50:32Z")

</div>

I found it and removed it for now.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 23, 2023, 5:15pm UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951/8 "2023-03-23T17:15:31Z")

</div>

@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%:

```auto
@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;
}
}

```

---

<div class="post-metadata">

**Author:** ![Trainerw](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/trainerw/32/2454_2.png) [@Trainerw](https://community.elfsight.com/u/Trainerw)\
**Post date:** [March 23, 2023, 5:28pm UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951/9 "2023-03-23T17:28:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 23, 2023, 5:30pm UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951/10 "2023-03-23T17:30:21Z")

</div>

@Trainerw Okay, I got it!

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

Have a great day 🙂

---

<div class="post-metadata">

**Author:** ![Trainerw](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/trainerw/32/2454_2.png) [@Trainerw](https://community.elfsight.com/u/Trainerw)\
**Post date:** [March 23, 2023, 5:36pm UTC](https://community.elfsight.com/t/sizing-forms-for-mobile/13951/11 "2023-03-23T17:36:25Z")

</div>

Thanks for all you do.