Why does my design look so different in the app, Android, and web preview? Don't know which to build / design for

Hello all, I picked up my pet project a few weeks ago after shelving it for a while. (life, amiright?)

I’ve finished integrating APIs and tweaking the design, but I’m really frustrated with a problem I’m having. The problem is that I’m unsure which to build / design for because all 3 of these look so different.

I haven’t been able to get a successful iOS install because they keep failing with no notes on how to fix it, but my assumption is that it’ll look different. If so, I’ll have 4 layouts to figure out.

At this point, I’m so frustrated I’m almost ready to cancel my account and start over with FlutterFlow.

Any suggestions?

Cheers,
Dean…

1 Like

Hello @deanmachine
I can understand that it is frustrating and appreciate you taking the time to provide information and screenshots.
Based on your screenshot I see on each device a different size, this probably causes the issue.

Do you have Resize Mode: “Stretch” on the Layout?

Could you please try to set it to “Float in Place”?

Float in Place renders the layout in the same aspect ratio as the design, regardless of the device size.

1 Like

Hey @ioannis, yes all of the images are set to Float in place, but text was set to Stretch. However, when I change the text for sunrise/sunset times to Float in place, things break even worse.

Sunrise data jumps to the far left (red dotted lines) in Design. In Web preview, it’s visible in the correct location, but both that icon and the Sunset icon shift to the right.

I can’t be the first person to have these problems. Am I?

Cheers,
Dean…

Hello @deanmachine
Thank you for sharing more information.
Have you tried to use the Layout component?

I have tried using the Layout component in Thunkable. It’s a great tool that allows you to arrange and design the visual layout of your app. You can easily add various UI components like buttons, text elements, images, and more to create the desired user interface.

Are you saying I now have to redesign the entire thing with the Layout component? @ioannis

Hello @deanmachine
I don’t mean to build everything again. You can put the existing components inside a Layout

@ioannis Will I need a Layout component for every asset in my UX? Or can I use 1 component for all of them?

This is what I meant by rebuild the whole thing. I have to recreate the entire thing with the Layout component.

And this is after paying my subscription for over a year. I’d like a credit for the new headaches this created, please.

Hello @deanmachine and Happy New Year :tada:
You can use one Layout and many components inside.
Unfortunately, I can’t help you with billing issues.
For financial issues, please send an email to billing@thunkable.com. They will be helpful in resolving these billing-related issues.