Problem with live test - layout issues

Questions about Thunkable
1

Hi , I am having A problem with live testing. The Test shows up good and fine on web preview but all mashed up in phone preview pictures are below.
Web preview

image
image364×652 46.1 KB

IOS
image
image473×1024 50.8 KB

Android
image
image590×1280 49.6 KB

2

try doing fixed designing as in responsive it might happen

3

@eko.devs.apploroceo no i have not done any designing i just put components nothing else

4

@eko.devs.apploroceo
now i tried fixed designing still same problem
please help

5

Hi there,

Can you share the URL of this project, either in this thread or in a message to me?

6

https://x.thunkable.com/copy/64a110c3abbbba33841b1a90a65d2b39

7

i removed all invisible components and lots of code @jane
thanks in advance @jane

8

@jane please reply

9

I’m not getting the same thing when I preview on IOS. Using your copy link, I see the text inputs stacked together. Looks like you removed some code.

One problem I saw was that you were using a stored variable for the photo, but not checking if that’s null.

I turned your screen and column22’s vertical alignment to ‘top’. That looked pretty good on my small iphone screen except it’d need to scroll. There was a lot of space around select photo and take photo. I changed column21’s width to 100% (you could go with less), and that got everything on the screen without any weird layout. You might want to add some margins.

image
image640×1136 95.8 KB

3 Likes
10

Ok thanks a lot @catsarisky So maybe it my phones problem right?

11

Try the settings I suggested and see if that fixes you up. :slight_smile: Sometimes a bunch of nested stuff set to “fit contents” will end up being a weird size.

2 Likes
12

ok will try

13

I wouldn’t conclude that it is all your phone’s fault, especially since you saw it on an iOS and an Android phone. (Sometimes layout issues show up with especially small screens, but you presumably want it to work on small screens, too.) The problem is more that the web previewer doesn’t always reflect what’s going to happen on a phone. If you’re building for web, you’ll want to pay more attention to the web preview, but otherwise, you’ll want to regularly check your layout on at least one iPhone and one Android, if you’re building for both.

3 Likes
14

Yes , i would want to do that if i am developing an app.
Also yes it works now but i was wondering how to put space around property.
Thanks a lot in advance

1 Like
15

Does setting the margins to something other than 0 get you what you want? You can also set vertical or horizontal alignment of containers (screens, rows, columns) to “space around” or “space between”, but I’m never entirely happy with how that looks and prefer to set margins.

2 Likes
16

Margins and paddings are the best for precise position control.

2 Likes