Perspective design help to recreate header from Vision

Ignition
,
1

I’m trying to recreate this from Vision:

image

I think i need to use the coordinate container as the bats and ball are sitting over the top of other components.

I created this so far in Perspective in the Designer:

image
image825×148 16.6 KB

However I really want this to all be centred if the display is larger than it’s designed for… but I get this at the moment when I launch it in the browser:
image
image1484×166 18.5 KB

I can’t think of a non-dumb way at the moment to resolve it… I need some help please :slight_smile: I’d like to have the background thinner rectangle extend to the page bounds, but the bats/text/ball centred.

Actually there are lots of other issues with it at the moment…

CoordContainerWoes
CoordContainerWoes962×300 653 KB

View attached:
table-tennis-tournament__header.json (21.7 KB)

2

So I sort of got something working, still have no idea how to add the ball above the ‘i’ in ‘tennis’:

I added a flex container and same spacers

image
image1151×406 34.8 KB

CoordContainerWoes2
CoordContainerWoes21093×300 870 KB

The auto basis in the title doesn’t work very well when the text is put onto 2 lines :thinking: any way around this?

table-tennis-tournament__header.json (17.6 KB)