Responsive screen. Home screen

Discuss
1

A white truck with a large brown container on its trailer is displayed on a white background with four circular icons placed vertically to the left of the truck. (Captioned by AI)
A white truck with a large brown container on its trailer is displayed on a white background with four circular icons placed vertically to the left of the truck. (Captioned by AI)720×1600 87.8 KB

Everything was fine on the first cell phone.

A white semi-truck with a large wooden cargo container on its trailer is displayed on a mobile app interface with several blue circular action buttons. (Captioned by AI)
A white semi-truck with a large wooden cargo container on its trailer is displayed on a mobile app interface with several blue circular action buttons. (Captioned by AI)720×1480 65.2 KB

In another instance, the responsive design isn’t working.

2

Hi dear,

It would be very helpful if you could show how you created this layout.

3

A screenshot of a hierarchical component list from a user interface design or app development tool showing nested elements including screens, vertical organisation, canvas, image sprites, floating action buttons, responsive size, decoration, and a database component. (Captioned by AI)
A screenshot of a hierarchical component list from a user interface design or app development tool showing nested elements including screens, vertical organisation, canvas, image sprites, floating action buttons, responsive size, decoration, and a database component. (Captioned by AI)351×593 19.5 KB

The image shows code blocks for calling functions to set component size and decoration values responsively based on screen width and orientation in an app development environment. (Captioned by AI)
The image shows code blocks for calling functions to set component size and decoration values responsively based on screen width and orientation in an app development environment. (Captioned by AI)554×499 18.4 KB

Trying to use the AppHelper_Studio extension

[Free Extension] Responsive App Size Extension (Best Update V3.0)

but without success here

4

Take a look here

5

Nothing different can help.

6

What did you try, show us in blocks.

Auto resize will not work with, i think, floating icons

7

A visual programming interface displaying blocks of code arranged to control floating action buttons and image sprite properties on a screen. (Captioned by AI)
A visual programming interface displaying blocks of code arranged to control floating action buttons and image sprite properties on a screen. (Captioned by AI)1335×726 51.8 KB

I thought of it this way and it worked. The logic is going to get complicated.

But it’s worked so far.

Still wrong

Thinking…

8

A visual programming interface with blocks for initializing global variables and setting component margins based on screen dimensions. (Captioned by AI)
A visual programming interface with blocks for initializing global variables and setting component margins based on screen dimensions. (Captioned by AI)1088×745 66.2 KB

I like this arrangement. I’ll keep it like this.

Any other ideas?

9

Different devices will have a different screen height and width (sometimes even two identical devices, depending on how they are setup).

All your positioning values will need to be based upon your screen height and width.