Differences between the app design and the down


I am having issues concerning the design of the app and the real result on the app or on the webapp especially on Ios, Safari, … It really a problem because some components are coming a little over other ones and they are not clickable anymore.
on the red rectangle the problems and what I have on the webapp on my computer in black rectangle

on my iphone the issue is on the webapp with safari, on the downloaded app (it is worst) and on chrome a little bit better.

you can see the black label is going over the image.
the blue label with the date, the corner are visible and the radius is inside.

here is almost the same the button is coming over the list item therefore the button is not clickable :frowning:

I hope you can help and I hope it is “just” a problem of configuration or wrong parameters in my apps because like this I cannot use it :frowning:


ps: my version is v276-28-prod and I am using the D&DUI

1 Like

Hi there.
Testing on the web won’t be showing the same as live preview on a phone.
This may be causing your problem.

1 Like

in fact the web preview is ok, the live testing is almost of (except the radius)
the webapp :
on the screen of my computer on chrome : OK , safari : OK

the webapp on my iphone 12: Chrome OK, on safari KO

the IOS app : KO (it is the worst that I have :frowning: )

1 Like

When you go to any project in your projects screen and choose Project Detail Page

You will notice at the bottom a disclaimer which explains your issue.


So basically, your design has to be geared or focused on your ultimate platform to use. Trying to design for mobile devices will not make it perfect for the web and vice versa

1 Like

Hello I fully understand and it is “normal”

My issue is that I do not have the same behaviour and the device itself depending on the navigator I am using.

The disclaimer is also to say that components are different depending on the device. it is the same with more traditional code.
My second issue is that it is not a problem on how it appears in terms of design but the component that are coming on top of others.
On the design they are really separated. With the drag and drop UI we have less options for responsivness I am wondering where to find “best practices”.
In the meantime I am doing some tests by calculating everything dynamically but I am not sure that it is possible or that it will solve my issue :frowning:

unnfortunatly I think it is not possible because I do not see where to play with the positions.

I can only play with the width and height :frowning:

Do you know where I can find information about reponsive design and the D&DUI ?

For the D&D interface, you mostly have to ‘trust’ it to do the responsive design for you. Unlike the older UI (which I’d have thought seriously about using for the layouts you’re showing - I think it would have been easier!), you don’t have a way to set height and width for individual elements using blocks.
The problem you’re showing is that the packing algorithm is ‘guessing’ incorrectly when it resizes your design to fit the screens you’re using. If you want to post a screenshot of the design screen, that might offer some clues to how to fix the packing problem. I’ve observed that packing for elements that shouldn’t be on top of each other is most reliable when the elements are not on top of each other in the design interface, also. That includes NOT ONLY the text/button/whatever, but also the grey box around each one. When you overlap the elements in the design interface, I suspect that Thunkable thinks its OK if they overlap - and it doesn’t know that you were only overlapping invisible margins, not important content. That’s a guess, because I haven’t seen your design screen.


In the design the component are not overlapping at all :frowning:
I will see if I can manage to do it with the older version but I have 2 main concerns :

  • I have to do it again from scratch :frowning:
  • I am used to the design column / row … I am scarred it will take me a lot of time :frowning:

I contacted the support and I will see if they can come with a solution
Thanks for your answer

Yeah, I hear you. I hope you won’t have to resort to the older interface to get it working the way you want. I was saying that I thought your layout would have been easier to get to that way, not that I thought you should redo.

Can you post a screenshot of your design screen? (Or a copy link for a problem screen in your project?) Someone might see something you’re missing.


thanks !!!

here a copy of my app with only the screens with the issues


In the meantime I will do some tests with the old plateform.

I’m not seeing the problem, but I don’t see anything like what you had posted in your first post - no images at all.

In fact I am setting up the images dynamically in my blocks and make it visible.
I will update this public project tomorrow morning with static assets and make images visible.

I manage to have a result that is not that bad by spacing more the components
I also raised this problem to the support with no feedbacks for the moment.
I checked again and there was no overlap between the components. On an iphone 7 I did have the overlapping and on the 12 yes. I think it is a problem of “flex” options.
I let you know if I have feedbacks from the support team.
Thanks for your help