Hello, sorry to bring this to a new topic but I’ve searched and searched with no answer found. I have a fully working e-commerce app, I designed it on a Huawei Y9 2019 and everything looked fine, although when I tested it on a Huawei Y9 2018 (which is smaller) all my UI looked smushed and compressed. I’ve watched several videos on how to make a responsive screen but are on different platforms and the options which exist there don’t exist on Thunkable x.
Please, can somebody help me? For that screen, in particular, I’ve used several rows and columns to keep everything in “order” and I’m scaling them with “Relative Size”.
Here are some Screenshots, one on Y9 2019, and one on Y9 2018.
I think the main problem is that you have your rows and columns set to Relative Size. It is like putting a bunch of blocks of specific heights into one box and then transferring it to another smaller box. Because it is smaller, it won’t fit (bad analogy). I suggest setting each row to “Fit Contents” and then adding margins above and below to make everything spaced out. After that, you should set it to scrollable so that it doesn’t squish, no mater the height of the screen. For the checkmarks, you should set the row they are in to have a vertical alignment “space around” so it automatically spaces it out (I don’t know if that’s a problem for you).
I also see that you tried to add dividing line between sections by using ----- or … and on the smaller screen it is being squished together. To fix this, you should set borders on the top and bottom of the Rows/Columns being divided. You can specifically set it to only have borders on the top in the advanced section.
Using these practices will make sure your apps look good on all devices. Also, attaching your project may help with finding possible issues.
Hi mythi! Thank you for your quick response! I will try and follow your kind suggestions and i’ll let you know it it worked for me! Thank you very much.
