[Solved] Spacing is different in Preview and Phone

I have an app with text in the middle and a spacer on top and on bottom. There are two buttons below the spacer on the very bottom. When I view the app on Preview, it looks fine, but when I Live Test on my phone, the two buttons on the bottom do not show up.

https://x.thunkable.com/copy/bc4bf6c18195811d8143eba72b63c42a

1 Like

Insert an empty [Row] or [Column] component just below the 2 buttons so they come up a bit and you will be able to view them on your phone.

1 Like

You might also look at using the Margin (outside a component) and padding (inside a component). I now almost always set the screen margin and padding to 5pts on all 4 sides. It helps a lot.

Additionally, as a general rule the layout behaviors between the web app and the iOS/Android apps are VERY different. Depending on the component, you will sometimes need to use the device block to set the properties differently depending on the device. :frowning:

3 Likes

@drted
I thought of the Margin property but if he is not seeing the whole button then he would need much more than 5 points to have them visible.

Thank you for pointing it out.

I’m guessing you are right, there is some other issue with the whole button missing

1 Like

Thanks for all the suggestions! You gave me stuff to work with, and I think I figured it out. I simply deleted the “space” and changed the border and padding on other components, and I can get it to look good now.

I normally work in MIT App Inventor, and Thunkable is new for me. This was a student’s app, and I assumed the “space” was a component, but now I realize it was a “list viewer” component. I believe that was what was throwing everything off.

2 Likes

glad to hear you figured it out