Grid Template / center element

I'm working with grid template and align-items for a patch.
All is perfect on computer, but when opening the patch on pad the XY pad is not displaying correctly
In the css property I used for the panel :

grid-area: c;
display: flex;
align-items: center;
justify-content: center;

and inside this panel I have an other one containing the xyPad widget and SVG
the panel's css is :

aspect-ratio: 1;
height: auto!important;

and here is the result on pad :

mainSquared.json (129.6 KB)

Unfortunately iPhone/iPads have their own css bugs, the built-in layout configurations should work fine but I can't guarantee every custom css combination will. I'm afraid you'll have to tweak the css yourself to make it work eventually.

It seems aspect-ratio is not supported on iOS < 15, this may be the problem here.

Argh, the aspect-ratio is ok as I am on iOS 16.6
But maybe there's some conflict with using display flex.

Here is your session with flex layouts instead of grids. I find it much easier to work with :). (edit: well, the height/ratio of the xy pad still need some tinkering)

mainSquared.json (129.9 KB)

Attached session should be ok I think, although there is a h-centering issue with the built in client (a css bug fixed in recent chromium versions).

mainSquared.json (134.5 KB)

Centering an object with a variable size and a fixed aspect ratio using css is not a trivial task, I think the simplest solution would be to use @media rules to define fixed widths and heights instead of looking for a single rule that fits any screen size.

Something like this :
mainSquared.json (134.6 KB)

(media rules in panel_mainCenter's css)

1 Like

So I tried to get something responsive,I lost the battle but learnt a lot.
Your solution is the best, thank you

Just a question about this line, is it default start up size ? :

:host {
  --xy-size: 400px;

Yes but you can remove it it the media queries cover all possible sizes.