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?
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 
the AI help says it should work in phone view
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
1 Like
When in doubt, please post a question here. The AI’s responses should be taken with a grain of salt.
1 Like
Where should this go?
Please check the way to apply CSS here.
1 Like
still doesn’t work
Can you show us how you’re setting it up?
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.
I mean can you show a screenshot of your settings?
Based on this, in your case it should be:
.author-container .fourColumns {
grid-template-columns: repeat(4, minmax(0px, 1fr));
}
Sadly, still no luck
You are missing a period “.” in your CSS. Please copy and paste the CSS
1 Like
Probably not the answer you want to hear. But from my point of view, you are attempting to solve the wrong problem:
-
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.
-
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.
-
If you are omitting a period in your CSS code, you probably shouldn’t be attempting anything with CSS in the first place.
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.
1 Like
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 
1 Like