Hi Experts, So this is going to be a challenge for all CSS Experts :smiley: . I was facing a challenge to display 8 horizontal tiles in one row but I achieved that through CSS. Thanks to @Lucas_Pires and @Robert_Petitto. Now, I need to display 16 tiles as shown on the screenshot :see_no_evil:. I am sure this is going to be trickier, but I am also sure nothing is trickier for our super experts :smiley: First screenshot shows what I want to achieve, and second screenshot shows what I have done till now. Looking forward to some helpful responses from our experts :slight_smile: [Screenshot_20220702-054526_WhatsAppBusiness] [Help css]

div[id*='screenScrollView'] > div > :nth-of-type(9) [data-test="app-horizontal-list"] .inner { grid-template-columns: repeat(16, 20px) !important; margin: 1px; column-gap: 1.75px !important; } div[id*='screenScrollView'] > div > :nth-of-type(9) [data-test="app-horizontal-list"] .tile-image-area div:nth-of-type(1) { height: 20px; }

Seeing you have the CSS code for other “lines” already, wouldn’t it just be a matter of changing the repeat params? (Say 16, 5px - there’s not a lot of screen estate to work with, to be honest)

Maybe you could use GraphViz? https://quickchart.io/documentation/graphviz-api/

The thing is, this is basically a checklist app. When a circle is tapped, it is changed into BLUE color. I don’t think I can use quickcharts for that.

Yes true, but the circles are not fitting in when I set the params to 16 - 5 px

Can you send over a screenshot on how it looks like at the moment?

I found the solution!!! There was a piece missing on my existing CSS code. Entered that and it works just like I wanted.

It would be nice if you could share the CSS, just in case somebody else wants to do something similar in future. And for that matter, a more descriptive topic title would also be useful.

Yes! This is what I do here: [image] CSS to create overlapping profile images Community Resources I want to turn a horizontal list of tiles into an overlapping list of tiles like you see in most social media apps. If you can figure this out using CSS, I’d be happy to compensate your time. Turn this… [Screen Shot 2021-04-19 at 8.58.37 PM] …into this (+2 not necessary): [image]

CSS to display more than 4 horizontal tiles

Ask for Help

Robert_Petitto July 3, 2022, 9:25pm 11

Yes! This is what I do here:

Topic		Replies	Views
More than 4 horizontal tiles Ask for Help	3	513	July 1, 2022
CSS to create overlapping profile images Community Resources	25	6503	November 18, 2021
How to fit 5 elements in a horizontal list? Ask for Help	15	1013	January 7, 2022
More tiles per row Feature Requests	15	909	September 27, 2022
Wrap text for horizontally laid out Tiles Feature Requests	1	969	November 20, 2019

CSS to display more than 4 horizontal tiles

Related topics