Spacing between images

In the classic version, I have several images that I use as buttons to link to an action to “show new screen”. The images fit close together allowing me to have about ten without having to scroll.
I have now started to create the same in the new App but there are gaps between the images. I have tried putting the images just one after the other and also tried using a container but cannot get a tight fit. Any ideas ?
Classic Version
Screenshot 2024-07-01 at 10.13.55
New App version

If you’re on a paid plan, you can use CSS to reduce the gap/margin between those elements.

1 Like

I understand that without upgrading to one of the new plans I can’t use CSS ( which I never could get the hang of) but it’s a bit of a shame that there are no settings to just compact elements when using a container.

I assume you need those images to be clickable?

Hi
Yes they are my menu items that open a new tab or screen
My plan unfortunately doesn’t include CSS in the new apps
They all function exactly as I want but they just take up too much of the screen because of the gaps between.

You don’t have to use the image component. Use richtext with css-inline you can achieve what you want.

<div style="margin-bottom:-10px;">
<img src="Image_URL" alt="image" style="width:100%;">
</div>

If I’m reading this right, then those items won’t be individually clickable.

@baremeter Does it have to be images though? The list collection offers almost the same look, just without the bolded text.

1 Like

It’s not clear either. I don’t think a classic inline-list could have that kind of appearance.

I have tried the list idea but there is still a lot of spacing between and I really want to keep my graphics!
I just feel it’s a shame that my plan does not include CSS but hey ho, that’s progress I suppose :thinking:

And I can’t make the individual lines on the list link to different pages or tabs

Just tried this again and it seems to work !
I thought that I couldn’t use CSS but when it’s used as you have shown, it does ‘
I’ll work on it again and show you the outcome

Yes, only limited to inline CSS. Css that manages native components from Glide cannot be done in richtext.

You can, with a custom action. Say for your example, you would have a table of 4 “item names”, add a list using that table, then you redirect the user to the right tab by having 4 branches, based on each item’s name.