responsive design of experience

[robins1306]

Hi, I am a newbie in Thingworx Studio. I have my first experience running on a tablet. That works fine. But on a Smartphone, it is not working. Obviously because I didn't pay attention to a "responsive design". Unfortunately I cant find much information and maybe tutorials related to this. Can someone share valuable links, documents, with which i can teach myself how to do it?

I dont know how the pixel size, determined in the Canvas interfere with the design. If i want to develop it both for a tablet and smartphone, what do I start with? Which pixel size? 

So please feel free to share any content, that can help me. Thank you in advance!

[bwhelan]

Hi,

Perhaps it is just a simple matter of changing the Minimum Screen Width setting in the Info Editor in Studio? If set to tablet, you may have an issue viewing on a smart phone. Just change this and re-publish to see if this is the issue?

Regards,

Brian

[robins1306]

Hi Brian,

no unfortunately its not. This setting is already at 320 dp. 

What I will try now is to set, as seen in the picture the size to 100% and adapt all inputs, tables and so on accordingly. Maybe this will work.

Thanks for your help anyway!

[jmikesell · Accepted solution]

So in Preview you can switch devices to simulate what your experience will look like on various sized devices (also landscape vs. portrait, which is critical). As for making it responsive you can use all allowable CSS units including relative lengths like vw, vh, em, %. Use of these will help you scale your 2D objects to the viewport.

[robins1306]

Thanks a lot for this hint! So far it worked out fine but I have a problem with one table not adjusting to the screen width. Are the settings for this table/plane the right ones? How do they interfere with each other?

Thanks for your help!

[jmikesell]

Maybe try changing one of the parent objects of that chart, the column, row or even the data grid above it in the tree. You can use the dubug tools in Chrome to see the structure of the preview and even modify widths and class values without going back into Studio to change it. Right click on the 2D content and select "Inspect".

[mgoel]

Hi @robins1306

Hope you are doing good. Could you please confirm if the issue has been resolved.

If yes, please mark the answer as accept as solution for the future reference. Thank you in advance.

Regards-Mohit Goel

[robins1306]

HI @mgoel,

so far I just started from scratch designing everything for a smartphone. In my opinion then, if its visible on a smartphone, it will also be visible (sizewise) on a tablet. That workes fine for me.

Thanks!