these settings are enough for any device.

question is, what exactly are you trying to do?

if you want a responsive canvas, it is regulated by the settings in the editor for the layer (you can write in the code if you do not use the editor) - MinScreenSize and MaxScreenSize and set windiw Mode to 'full'.

If you do not know what these properties mean css is better not to touch anything! and do this - I see you have connected the bootstrap-perhaps you want to do something your layout or columns or other elements?

if you just want to insert a game on a page where you have something laid out the best way to use bootstrap is 'embed-responsive' and iframe, where src is index.html of game

It look like something that:

<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="PATH_TO_YOUR_GAME/index.html" onload="this.contentWindow.focus()" onclick="this.contentWindow.focus()" allowfullscreen="true">
	    Your browser not support iframe
	</iframe>
</div>

I am using Cordova but didn't have to change anything, I am just using the default css and html included with wade, it's already "responsive" if by that you mean that it adapts to the resolution of the device you are running it on.

Have you seen this tutorial about working with different resolutions? 

https://www.youtube.com/watch?v=KVTn5GQU5f8

Thanks @krumza and @cleo!

I was afraid that when I port my game in a later future that it would not be responsive because of the way my text is draw.

But apparently it's a matter of configurations, I think I'm not setting it the correct way:

x: (-wade.getScreenWidth() / 2 - wade.getScreenWidth() / 4),
y: (-wade.getScreenHeight() / 2 + wade.getScreenHeight() / 25),

var info new SceneObject(infoText, 0, x, .y);

I was trying to understand what's the relation on this with the html

<div id="wade_main_div" width="800" height="600" tabindex="1"></div>

Perhaps if I find the correct math there, it should put the text to the top-left on all resolutions.

I think those (800x600) are just some initial default values but then wade resizes the game area to match the screen size.

The top left coordinates are

x: -wade.getScreenWidth() / 2
y: -wade.getScreenHeight() / 2

If you want to place your TextSprite near the top left corner, use those coordinates (maybe add 30  "pixels" to each, they aren't really actual pixels anyway depending on how you set minScreenSize and maxScreenSize).

Then you set the alignment of the TextSprite to 'left' so those coordinates point to the left edge of the text:

textSprite.setAlignment('left')

And you set the alignment of the SceneObject (not the TextSprite) to 'top' 'left', which means that when the screen size changes, the anchor point for your object is the top left corner of the screen (and not the center of the screen as it would normally be).

sceneObject.setAlignment('top', 'left')

When you do that there is no need to worry about different resolutions, your text should always be near the top left corner.

There is a way to do this thing in the editor too, but I usually do it in code, I don't know much about the editor

I was able to make it fit to the top left on normal resolution, however, on other devices screen size it get's the wrong position...

This is the way my function currently works:

function createGameHud(){
  var x = (-wade.getScreenWidth() / 2);
  var y = (-wade.getScreenHeight() / 2);
  var hudText = new TextSprite(null, '18px Arial', 'white', 'left');
  var hudObj = new SceneObject(hudText, 0, x, y);
  hudText.setAlignment('left');
  hudObj.setAlignment('top', 'left');
  hudObj.setName(hudName);
  return hudObj;
}

The game looks like this: https://ibb.co/cbiatJ

Sorry, picture wasn't uploading...

that looks ok to me, but how are you setting minScreenSize & maxScreenSize?

wade.setMinScreenSize(800, 600);
wade.setMaxScreenSize(800, 600);

Runnin' on App.load function

it's difficult to say without seeing it all, but if you are loading a scene, the scene settings will override that. If you are loading a scene, do that minScreenSize/maxScreenSize thing afer the scene is loaded. 

Also I'm not sure but I think that if you are not loading a scene, you should probably do that in App.init

Hi ViniGuerrero

Did you figure it out? If not, feel free to attach a zip of your project here (or PM me if you don't want to make it public) and I can take a look.

Thanks @Gio! I was able to fix it, finally understood how it works.

Setting up game height and width as the first to-do in js files fixed the issue. ( loading matter ).