# Container not showing side by side

**URL:** <https://community.glideapps.com/t/container-not-showing-side-by-side/82155>\
**Category:** Ask for Help\
**Created:** [May 31, 2025, 6:57am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155 "2025-05-31T06:57:52Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![adamjyo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adamjyo/32/88690_2.png) [@adamjyo](https://community.glideapps.com/u/adamjyo)\
**Post date:** [May 31, 2025, 6:57am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/1 "2025-05-31T06:57:53Z")

</div>

So I’m in the phone layout, I have a container set to 4 columns, but every element I’ve tried shows up under the previous, not side by side, how can I resolve this?

---

<div class="post-metadata">

**Author:** ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)\
**Post date:** [May 31, 2025, 7:06am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/2 "2025-05-31T07:06:44Z")

</div>

That’s how it is supposed to work. It’s only designed to show side by side on desktop, and just all show under on mobile. You could try some CSS maybe but I’m not sure 😅

---

<div class="post-metadata">

**Author:** ![adamjyo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adamjyo/32/88690_2.png) [@adamjyo](https://community.glideapps.com/u/adamjyo)\
**Post date:** [May 31, 2025, 7:15am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/3 "2025-05-31T07:15:34Z")

</div>

the AI help says it should work in phone view

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [May 31, 2025, 11:48am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/4 "2025-05-31T11:48:10Z")

</div>

With CSS

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

```

Some components can sit 4 wide on mobile natively like tabs and buttons

---

<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 31, 2025, 1:06pm UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/5 "2025-05-31T13:06:27Z")

</div>

> [@adamjyo](#):
>
> the AI help says it should work in phone view

When in doubt, please post a question here. The AI’s responses should be taken with a grain of salt.

---

<div class="post-metadata">

**Author:** ![adamjyo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adamjyo/32/88690_2.png) [@adamjyo](https://community.glideapps.com/u/adamjyo)\
**Post date:** [May 31, 2025, 11:32pm UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/6 "2025-05-31T23:32:43Z")

</div>

Where should this go?

---

<div class="post-metadata">

**Author:** ![adamjyo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adamjyo/32/88690_2.png) [@adamjyo](https://community.glideapps.com/u/adamjyo)\
**Post date:** [June 1, 2025, 12:50am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/7 "2025-06-01T00:50:34Z")

</div>

![Screenshot 2025-05-31 at 7.49.32 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/5/551d6ce61f8b3447d5839c2aaea3c56082b9e3d3.png)  
there’s plenty of room for these icons to be in columns

---

<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:** [June 1, 2025, 1:36am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/8 "2025-06-01T01:36:56Z")

</div>

> **[Custom CSS | Glide Docs](https://www.glideapps.com/docs/css-for-apps)**
>
> Customize the way your app looks with CSS.

Please check the way to apply CSS here.

---

<div class="post-metadata">

**Author:** ![adamjyo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adamjyo/32/88690_2.png) [@adamjyo](https://community.glideapps.com/u/adamjyo)\
**Post date:** [June 1, 2025, 3:04am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/9 "2025-06-01T03:04:02Z")

</div>

still doesn’t work

---

<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:** [June 1, 2025, 3:16am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/10 "2025-06-01T03:16:02Z")

</div>

Can you show us how you’re setting it up?

---

<div class="post-metadata">

**Author:** ![adamjyo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adamjyo/32/88690_2.png) [@adamjyo](https://community.glideapps.com/u/adamjyo)\
**Post date:** [June 1, 2025, 3:24am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/11 "2025-06-01T03:24:03Z")

</div>

well, I make a container, I put any for elements in it, I tell it to be 4 columns. then I try everything that’s been suggested with no success. I found where to out custom CSS and gave my container a CSS name. I can manipulate it with said CSS, but cannot make it show in a horizontal grid of any kind.

---

<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:** [June 1, 2025, 3:24am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/12 "2025-06-01T03:24:26Z")

</div>

I mean can you show a screenshot of your settings?

---

<div class="post-metadata">

**Author:** ![adamjyo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adamjyo/32/88690_2.png) [@adamjyo](https://community.glideapps.com/u/adamjyo)\
**Post date:** [June 1, 2025, 3:27am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/13 "2025-06-01T03:27:23Z")

</div>

![Screenshot 2025-05-31 at 10.24.50 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/7/1793ff817d6832d6957b625215c0f2389756dca7.jpeg)  
 ![Screenshot 2025-05-31 at 10.24.50 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/7/1793ff817d6832d6957b625215c0f2389756dca7.jpeg)

---

<div class="post-metadata">

**Author:** ![adamjyo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adamjyo/32/88690_2.png) [@adamjyo](https://community.glideapps.com/u/adamjyo)\
**Post date:** [June 1, 2025, 3:27am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/14 "2025-06-01T03:27:44Z")

</div>

![Screenshot 2025-05-31 at 10.26.45 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/a/ca54266c138fc8d628f3b2312e3d9e1b44acc926.jpeg)

---

<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:** [June 1, 2025, 3:30am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/15 "2025-06-01T03:30:11Z")

</div>

> [@Container not showing side by side](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/4):
>
> With CSS .grid-container .fourColumns { grid-template-columns: repeat(4, minmax(0px, 1fr)); } Some components can sit 4 wide on mobile natively like tabs and buttons

Based on this, in your case it should be:

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

```

---

<div class="post-metadata">

**Author:** ![adamjyo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adamjyo/32/88690_2.png) [@adamjyo](https://community.glideapps.com/u/adamjyo)\
**Post date:** [June 1, 2025, 6:46am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/16 "2025-06-01T06:46:14Z")

</div>

Sadly, still no luck

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [June 1, 2025, 8:54am UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/17 "2025-06-01T08:54:59Z")

</div>

You are missing a period “.” in your CSS. Please copy and paste the CSS

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [June 1, 2025, 2:49pm UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/18 "2025-06-01T14:49:28Z")

</div>

Probably not the answer you want to hear. But from my point of view, you are attempting to solve the wrong problem:

1. You want to display “Written by” users side by side. A good way to do this would be to display a collection. No need to use a container with multiple columns. This is the crux of it I think.

2. Containers can have multiple columns, for instance 4. On a wide screen (desktop), these columns will display side by side. On a narrow screen (mobile), these columns will stack and display below one another. This is how adaptive user interface works. I wouldn’t try to reinvent interface design with CSS, it’s hacky and unnecessary.

3. If you are omitting a period in your CSS code, you probably shouldn’t be attempting anything with CSS in the first place.

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [June 1, 2025, 2:59pm UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/19 "2025-06-01T14:59:37Z")

</div>

Glide would really benefit from a feature that allows components to be placed side by side on mobile. Right now, we often end up using too much vertical space just to create a simple layout. Keeping important elements “above the fold” is key to good design… and this code helps make that possible.

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [June 1, 2025, 3:04pm UTC](https://community.glideapps.com/t/container-not-showing-side-by-side/82155/20 "2025-06-01T15:04:17Z")

</div>

I agree 100%. But this would be separate discussion. Or we could discuss CSS versus the custom AI component.

In this current topic however, Adam is attempting to display multiple users side by side. What if he needed to display 6, or 8, or 10 such users? Containers with multiple columns would not come into question, with or without CSS. The natural way to achieve this in Glide is with collections 🤷

[Next page](https://community.glideapps.com/t/container-not-showing-side-by-side/82155.md?page=2)