# Placing Form Fields Side by Side **URL:** \ **Category:** Ask for Help\ **Created:** [July 8, 2024, 9:06am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689 "2024-07-08T09:06:40Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 8, 2024, 9:06am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/1 "2024-07-08T09:06:40Z")
Is there a way to create form fields side by side? I have two text entries inside a form—one for first name and one for last name. I want them to be displayed next to each other. Is there a way to do this? ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 8, 2024, 11:09am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/2 "2024-07-08T11:09:18Z")
> [@How to Maintain Container Layout on Mobile Devices](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021): > > Seeing a desire to maintain a container layout that is not responsive to mobile devices, you can still achieve this through the “grid-template-columns” code. Here’s the code you need to add to your application’s custom CSS: Note: class name is grid-container .grid-container .oneToOne { grid-template-columns: repeat(2, minmax(0px, 1fr)); } ---
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 8, 2024, 11:16am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/3 "2024-07-08T11:16:52Z")
I have to add the following CSS to my container component, right? ".grid-container .oneToOne { grid-template-columns: repeat(2, minmax(0px, 1fr)); } " ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 8, 2024, 11:21am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/4 "2024-07-08T11:21:59Z")
You need to write the class name (grid-container) in the container component options section. And the CSS code is written in the custom CSS section (Settings - Appearance). ---
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 8, 2024, 11:32am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/5 "2024-07-08T11:32:31Z")
I did this, but it is not working ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/8/6818144f5691de14626136749d5ad04d510bfb80.png) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/9/b9aeca1de09708882ea723ca996ad867b71384b4.png) ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 8, 2024, 11:35am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/6 "2024-07-08T11:35:30Z")
You need to turn off the “use compiled CSS” button to apply CSS in your application. And turned on “preview custom css” to see the effect in the builder. ---
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 8, 2024, 11:36am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/7 "2024-07-08T11:36:25Z")
did that not working ---
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 8, 2024, 11:37am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/8 "2024-07-08T11:37:05Z")
![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/1/d17265d7727ba243904bbadcc212b87811fa5f1f.png) ---
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 8, 2024, 11:41am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/9 "2024-07-08T11:41:10Z")
May be the reason is that my container is “FORM CONTAINER” not simple “CONTAINER” ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 8, 2024, 11:41am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/10 "2024-07-08T11:41:25Z")
> [@Himaladin](#): > > You need to write the class name (grid-container) in the container component options section. ![Screenshot 2024-07-08 at 18.39.48](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e141bb14c2a1e1f9973a2b63806b3509cd1efa4e.png) ![Screenshot 2024-07-08 at 18.39.22](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/f/3fdd2fd39edd3082be74ca76949729ad02d00eb3.png) ---
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 8, 2024, 11:43am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/11 "2024-07-08T11:43:40Z")
I did that ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/f/cf1cf1ae79dc0fc551246c943fe9f4f2e93c0ee1.png) but I can’t see this layout option for my “FORM CONTAINER” ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 8, 2024, 11:46am UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/12 "2024-07-08T11:46:54Z")
You wait, if your container is a form container. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 8, 2024, 1:45pm UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/13 "2024-07-08T13:45:00Z")
```auto /* Class name is: .formContainer */ .formContainer .full > div > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; box-sizing: border-box; } #page-root .formContainer .single-column { --container-x-pad: 0; flex-direction: row; } #page-root .formContainer > div > div > div > div { padding-left: 24px; flex-direction: row; padding-right: 24px; } ``` ![Screenshot 2024-07-08 at 20.45.41](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/d/3dcb0f869efc6aedab8e5013997827b3f9443dc3.png) ---
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 8, 2024, 6:31pm UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/14 "2024-07-08T18:31:54Z")
> [@Himaladin](#): > > `.` Thank you very much it is working ---
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 8, 2024, 6:36pm UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/15 "2024-07-08T18:36:14Z")
but adding title give just change alignment of things like this ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/3/f3cd0f5ccffd4d5e867ab1d756f2cec41c10f3d9.png) ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 8, 2024, 9:44pm UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/16 "2024-07-08T21:44:47Z")
That’s a styling issue in your Title component and not a code issue. Use a simple style for the Title component and don’t use images in limited space (side by side). And you should add a spacer component second after the title component so that your first name column will be aligned with the second name column. ![Screenshot 2024-07-09 at 04.49.38](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/c/ac4d6e703c5ed9c955bdbaa99d53c374512ac3ef.png) ---
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 9, 2024, 3:03pm UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/17 "2024-07-09T15:03:56Z")
Thank you very much, but image is the requirement of title! ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 9, 2024, 3:13pm UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/18 "2024-07-09T15:13:45Z")
Since the form fields have been changed to side-by-side, your fields are now divided into two, making it no longer suitable to use the title component. Another way to achieve the same result is by adding a regular container and placing the title component above it. ---
**Author:** ![Namra](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@Namra](https://community.glideapps.com/u/Namra)\ **Post date:** [July 9, 2024, 3:17pm UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/19 "2024-07-09T15:17:35Z")
Thank you for your support! ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [July 16, 2024, 3:18pm UTC](https://community.glideapps.com/t/placing-form-fields-side-by-side/74689/20 "2024-07-16T15:18:10Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.