# How to Maintain Container Layout on Mobile Devices

**URL:** <https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021>\
**Category:** Community Resources\
**Tags:** custom-css, custom-code\
**Created:** [May 3, 2024, 1:11am UTC](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021 "2024-05-03T01:11:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**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:** [May 3, 2024, 1:11am UTC](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021/1 "2024-05-03T01:11:03Z")

</div>

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**

```auto
.grid-container .oneToOne {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
}

```

 ![Screenshot 2024-05-03 at 08.21.54](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/5/3574a273c73b9f87df41701263dedc9bb0753e87.jpeg)

 ![Screenshot 2024-05-03 at 07.52.33](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/5/a56ba72eced140d4de943e32b72e8465a231cae1.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 4, 2024, 2:05am UTC](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021/2 "2024-05-04T02:05:08Z")

</div>

Added to [the library](https://css-library.glide.page/dl/library/s/8836b3/r/amxrKQS0S.ejzWg.8b2JjA), thank you!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 17, 2025, 4:50pm UTC](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021/3 "2025-05-17T16:50:07Z")

</div>

@ThinhDinh I tried this today. The units in the number entry boxes don’t align. Thoughts? @Himaladin maybe knows?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/c/cc3f5ce934562cd415a5984aeca90cfa2de62a7e.png)

---

<div class="post-metadata">

**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:** [May 17, 2025, 5:39pm UTC](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021/4 "2025-05-17T17:39:49Z")

</div>

It seems the issue is because you don’t want a label on one of the entries, so the space is taken up by the input box. You can fill the label with a blank space to make them align again instead of adding CSS code.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 17, 2025, 6:30pm UTC](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021/5 "2025-05-17T18:30:30Z")

</div>

Time to resurrect emptyspace???

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 17, 2025, 6:55pm UTC](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021/6 "2025-05-17T18:55:00Z")

</div>

Ha! Except, no, there is a unit on all entry boxes. I had to add a width:100 to the entry box and do an align-items: end to one of the parent divs. I’ll see if I can capture what did to make it work!

---

<div class="post-metadata">

**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:** [May 17, 2025, 8:18pm UTC](https://community.glideapps.com/t/how-to-maintain-container-layout-on-mobile-devices/73021/7 "2025-05-17T20:18:00Z")

</div>

After switching to `grid-template`, I noticed that targeting `.oneToOne > div:nth-child(2)` and adding some top margin helped push it down. The rest was just setting the input field (`[data-testid="wf-input"]`) width to 100% so the unit stays aligned at the far right of the field. That was just based on my observation from inspecting the DOM.