I continue to have problems with the development environment (web) showing objects running off the right side of the screen while the actual display on my iPhone looks great. Do I need to change a setting? It’s difficult to do the UI design when I don’t see the actual result without a live test.
Here are a couple of screenshots:
(actual iPhone screen)
Here’s the relevant portion of the dev screen:
For your screen, and button or text properties
go to advanced settings and fix position settings to center…
Ohhh I will try that to 
thx
@Navneet_Singhal, I appreciate the suggestion, the only options in the IDE for “screen” are Position, but the choices are limited to “absolute” and “relative” and then there’s “justifyContent”, “alignItems” and “alignContent” and they’re all set to “center”. It almost seem the screen is not wide enough to represent what I see on my iPhone. Any more suggestions? I’m a bit disappointed the Thunkable folks haven’t chimed in. I had this issue a year ago and was told it was a bug.
I use the Tampermonkey extension for Chrome to adjust the CSS, and using that I’m even able to add a fake iPhone bezel:
To use the script, you’ll need the Tampermonkey extension. Once installed, create a new script and paste this in:
// ==UserScript==
// @name Thunkable iPhone 8 Black
// @namespace http://kwmmcdn.com/
// @version 0.1
// @description Make the phone preview closer to standard iPhone size
// @author Kyle_Williams
// @match https://x.thunkable.com/projects/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
GM_addStyle(' .phone-preview { max-width: 400px; min-width: 400px; height: 900px; padding: 162px 40px 166px 38px; background-image: url(http://162.213.250.21/~kwmmcdn/thunkable/iphone8bezel_black.png) }');
GM_addStyle(' .phone-preview * { background-size: cover }');
GM_addStyle(' .designer .invisible-component-bar { width:50%; margin-left: 26% }');
console.log('ran');
})();
This is still not 100% accurate to iPhone screen size, but is much closer than the default look. Also, you may have to refresh to get it to work sometimes (so it can detect the URL). The iPhone bezel image is hosted on my VPS, and I may not keep it there if the demand on my server becomes too high, so feel free to rehost it on your own server.
Also, I use this on a 27" 5K iMac so I don’t know how well it holds up on other screens.
@Kyle_Williams, I just tried that and it seems to help, but not 100%. I appreciate the suggestion. I simply don’t understand why the Thunkable folks haven’t resolved this issue. It’s about a year old!
@ctm Just curious, what prevents you from using live test during your UI design? That’s currently the best way to see exactly how your UI will look on a real device.
-Mark
Actually, there’s nothing that prevents me from using live test and I’ve done that. However, it seems to me to be reasonable for the web IDE to more accurately display what’s being designed. As it stands, in order to design a layout that takes up the entire width of the actual device, I have to intentionally design with objects extending beyond what I can see. Note…I’m not complaining…just offering feedback.