[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

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.

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:

@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

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.

glad to hear you figured it out