problems with my browser game on smartphone screen

[CFerret]

I’m a coding/python beginner.
I have written a game in python and managed to get it work in the browser with anvil.
It looks fine on a desktop screen and on a tablet, but on a smartphone you can’t see the complete game; it doesn’t scale to fit the mobile screen and there isn’t even a scrollbar to scroll from left to right.

It has many buttons and I have build it completely in code (in the xy panel).

What can I do to make the game work on smartphone screens?

[divyeshlakhotia]

XY Panel is not responsive unfortunately. But maybe this fix can help.

Resizing in XY Panel

If you want everything centered in your xy panel and the width is dynamic, you can add the following to your theme.css Add the role and put the role on the XY panel itself. .anvil-role-centerXY > div > .anvil-component { left: 50% !important; transform: translate(-50%, 0); } If you only want some of the components in the XYPanel to be centered - you can add this role to any of the nested components .anvil-role-center { left: 50% !important; transform: translate(-50%, 0); } On the in…

It will align all components of XY Panel to center.

[CFerret]

Thank you for your answer.
I tried the solution mentioned in the link. Unfortunately, it didn’t seem to change anything.

[divyeshlakhotia]

Can you provide something like a Clone Link?

[CFerret]

Is this what you mean?
https://anvil.works/build#clone:GRITGRHJPRAHDQJE=4EP76B2IS5FBU3O3FRHGMQCC

[divyeshlakhotia]

The role will not likely solve your case here. The problem with your App is that the contents are too big for a small screen.

I’ll recommend using Flow Panels or Column Panels for your case since they will put extra contents to a new line.

[CFerret]

I already tried Colum Panel (and Grid Panel). If I understand it correctly, buttons created with code can only be arranged one below the other in Colum Panels (and not 5 in a row).
The buttons should keep their place to one another, otherwise the game would be very hard to play.

I will try to make everything smaller (if I ever manage to change the width of the buttons. I suppose I will have to change the size of the buttons in the CSS of the theme? It doesn’t seem to change the size if I use the “width=” keyword when creating the buttons.)

[divyeshlakhotia]

Column Panel can arrange multiple components in a row too but for your case, Flow Panel will work the best. It will arrange items horizontally.

[CFerret]

I tried Flow Panel, but it is not what I need. The buttons should stay in their places.
I will try to build a smaller version for the smartphone.
Thank you for your help.

[CFerret]

I found something like a solution:
I made everything smaller by reducing the width of the buttons in the theme.css (here I describe how I did it: Change the width of the buttons - #2 by CFerret).
Now it woks on the smartphone and looks quite ok on the computer desktop.