# Apps looks different in web, companion and app and margin is not working on layout **URL:** \ **Category:** Issues / Bugs\ **Created:** [September 12, 2024, 11:10am UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773 "2024-09-12T11:10:52Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [September 12, 2024, 11:10am UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/1 "2024-09-12T11:10:52Z")
Hello everyone, i have been having a few issue lately with designing my app. The apps looks so different on all platforms, take a look below: web: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/c/4c73c1b16bc4be4303f492a7657a714c146df413.png) App: ![WhatsApp Image 2024-09-12 at 13.01.10_d1e1dff1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/c/acebb9609d08e9fcf0449ad948722561a2619d57.jpeg) Companion: ![WhatsApp Image 2024-09-12 at 13.01.14_dffa2a71](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/4/84c77cac9d7c21a0b58c16afb1d08452af434f6c.jpeg) This should not happen especially on my phone somehow the companion looks better even tho the app has access to a bigger screen. Secondly i have also noticed that margins don’t seem to work. ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/b/dbd272ed8a3247693a2d0ef151ffe9c6562d924b.png) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/e/eeef8a9b5098ab4811d5f78a24c9f9b342202a7b.png) As you can see i have set the bottom margins but the layout items are still overlapping each other, also in the app it seems that they do not have any margins at all or too much margins. EDIT: turns out margin works unless you set the height or width to anything other than fill/fit contents Is there any way i can temporarily solve this? Thanks ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [September 12, 2024, 1:56pm UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/2 "2024-09-12T13:56:42Z")
Hello @sketch Thank you for sharing all the details and screenshots. I tried to replicate the issue and only happened when I cloned a rich text component. Could you please try to use a “Label”? ---
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [September 13, 2024, 6:32am UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/3 "2024-09-13T06:32:27Z")
Hello @ioannis thanks for your reply. the margin issue is sort of solved with it, but it seems that the first one still doesn’t have margins. Web: ![Screenshot 2024-09-13 082643](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/8/4853f611e2b6e4998a4bcc94d2d24f704e71ef61.png) Companion: ![WhatsApp Image 2024-09-13 at 08.28.01_7aea02a7](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/6/e63a86bc65be666ba789b46ff201204b6ac1aea2.jpeg) Please note: i ran out of apk downloads so im unable to test if an apk looks the same or different. ---
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [October 9, 2024, 9:55am UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/4 "2024-10-09T09:55:56Z")
Hi @ioannis Sorry if im reopening the topic again but i seem to have figured out a part of the issue, browser headers and desktop app bars. Basically i figured out that the sizing issue on the web is caused because the calculating of the sizing uses the full screen size, this works perfectly on mobile(If statusbar is turned off) but on browsers that have a header or on desktop with the app bar this doesn’t and the user has to go into fullscreen to fix it. Solution: on the web i think it’s better to use the innerHeight/innerWidth of the window rather than the screen size, this creates the correct sizing on the web for the elements. Thanks ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [January 10, 2025, 11:16am UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/5 "2025-01-10T11:16:40Z")
Hello @sketch thank you again for your patience. I would like to let you know that we have now officially released a fix for the bug with the rich text margin. Please keep in mind that you may need to do a [hard refresh](https://docs.thunkable.com/getting-started/data-sources/data-sources#hard-refresh-your-browser)of your browser for the changes to take effect in your project. If you experienced any of these issues on the [Thunkable Live](https://thunkable.com/mobile) app, you will need to update to the latest version through the App Store and/or Google Play Store before any changes will occur. If your [downloaded or published app](https://docs.thunkable.com/publishing-apps/publish) is affected by any of these issues, you will need to re-download or re-publish your app for these changes to take effect. ---
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [January 10, 2025, 12:30pm UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/6 "2025-01-10T12:30:01Z")
Hello @ioannis Thank you very much for letting me know, i ran a quick test and it’s indeed solved, this has significantly improved designing. thank you and the team. Edit: @ioannis is it correct that this only applies to labels and the rich text component? It seems that other elements are not affected by this, at least for the sizing/position issues. ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [January 10, 2025, 2:22pm UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/7 "2025-01-10T14:22:28Z")
Hi @sketch Could you please share more information? Which components do you mean? ---
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [January 10, 2025, 2:47pm UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/8 "2025-01-10T14:47:17Z")
Hi @ioannis i am talking about all simple list, group, rating bar, data viewer, data viewer grid, canvas and a few others, it seems that any text related component is safe. If you place a label and then compare other elements with the same y axis with them you can see some are a bit off. I wish I could give you more info but due to the new pricing plans I’m sadly unable to make a Propper testing project Edit: @ioannis you can take a look at this project: [Thunkable](https://x.thunkable.com/projectPage/675034b7267bc8dd4bc33f6c) The simple list and button are positioned at the same position but have different coordinates on the screen when live testing on the web ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [January 13, 2025, 8:25pm UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/9 "2025-01-13T20:25:12Z")
Hello @sketch Thank you for sharing more information and a project URL. I have tested it but I am not sure which is the issue. Could you please share screenshots of the issue? ---
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [January 14, 2025, 10:25am UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/10 "2025-01-14T10:25:38Z")
Hello @ioannis i have updated the project, if you go to bugs and select the first one you’ll be able to see what i mean. the first line is in a group and the second one is placed directly on a screen. The black line is where they elements should stop but they do not, even when the are all aligned at the same spot at the bottom of the screen. 1. i did some debugging around and it seems that the larger the element is the more it will cross over the line, meaning that the larger it it is the more misaligned it’ll be and the more of screen the size will go too. 2. it seems that this only applies to elements placed directly on the screen, if the are placed in a group there are only minor issues(elements are 1 or 2 pixels of) ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [January 16, 2025, 7:15pm UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/11 "2025-01-16T19:15:12Z")
Hi @sketch I tested it on the web preview: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/2/42315e3bbfa159e066aebdeafa4dabb7fce713f6.png) And here is how it looks to me on mobile: ![Screenshot_20250116_211059_Thunkable](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/d/1d3afde12a4c69576dc591737f1fca08b48b03f8.jpeg) I will investigate more on why this is happening. ---
**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\ **Post date:** [October 14, 2025, 6:18pm UTC](https://community.thunkable.com/t/apps-looks-different-in-web-companion-and-app-and-margin-is-not-working-on-layout/3196773/12 "2025-10-14T18:18:57Z")
Hey @ioannis. Have you been able to figure out what is happening here?