What CSS can I use to display container options next to each other regardless of the screen size?

Ask for Help
1

I’m attempting to switch to the newer form of app after only previously learning the classic app system. Previously I was able to use a rich text object to display images side by side using custom style css.

With the new system I can’t seem to find a way to show objects side by side when in the mobile view, they always show in a column. Is there some custom CSS I can use to do this? I am not very familiar with using html code or css so any help would be very much appreciated.

1 Like
2

In new apps the css goes under settings → appearance. You could give the rich text component a class name under options or directly in the html itself.

One way to keep a 2 column container in both desktop and mobile is to give a 2 column container the class name grid under the options for the container.

Then under settings → appearance use this css

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

Hat tips to @Himaladin. Look out for anything that guy posts about css he’s very good.

6 Likes
3

Thanks Eric!
That’s the closest I have gotten so far :smiley:

Is this method limited to 2 columns only? Or is it possible to scale this up to work the same way with 3 or 4 columns?

1 Like
4

You’re welcome! For 3 or 4 columns you could adjust the repeat. I’m away from my computer right now but I think it should look like this.

.grid-container .threeColumns {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
}
2 Likes
5

perfect!
Thanks again :smiley:

1 Like
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.