Resize game for smaller screens

[Rattler]

I am fairly new to Phaser and have found these forums an excellent resource.

I am building a game the was originally only for desktop, however now I am trying to get this working on tablets as well. 

The game is landscape only and is pretty much complete. It is made to run on a canvas of width 1200 x 740. I have added the below to the preload which works fine if the game loads on a resolution larger than the config width and is scaled smaller. (browser resized)

However when loading on a device/browser with the screen under 1200 wide, sections of the sprites are chopped off, resizing the browser works the same but sections are still cut off. 

const docElement = document.documentElement
const width = docElement.clientWidth > config.gameWidth ? config.gameWidth : docElement.clientWidth
const height = docElement.clientHeight > config.gameHeight ? config.gameHeight : docElement.clientHeight

this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.maxHeight = height;
this.game.scale.maxWidth = width;

Any help would be greatly appreciated.

[Rattler]

I have just realised what the problem is.

When creating the game it was being created using the following code

class Game extends Phaser.Game {
  constructor () {
    const docElement = document.documentElement
    const width = docElement.clientWidth > config.gameWidth ? config.gameWidth : docElement.clientWidth
    const height = docElement.clientHeight > config.gameHeight ? config.gameHeight : docElement.clientHeight

    super(width, height, Phaser.CANVAS, 'content', null)

  }

}

Changing this so that the game is created at a fixed size and letting the scaling scale to the users browser width as in previous post now works.

super(config.gameWidth, config.gameHeight, Phaser.CANVAS, 'content', null)