vastron 0 Report post Posted February 21, 2018 Hi guys, I have created some input fields in the DOM and I place them above my phaser game with css. In my game I use game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; so I use media queries to control the position of the input fields. I do it like this => #inputs { position: absolute; top: 30%; left: 40%; width:100%; } @media only screen and (max-width: 560px) { #inputs{ top: 35%; left: 20%; transform: scale(0.8,0.8); } } But it is almost impossible to follow the Phaser scaling!If you have any tips, please share! Share this post Link to post Share on other sites
samme 700 Report post Posted February 21, 2018 I never got this exactly right, but something like (see "caption" underneath) Share this post Link to post Share on other sites
vastron 0 Report post Posted February 22, 2018 Thank you, I tried it, but it seems I cannot escape media queries, so I am thinking of using the bootstrap modal for my form. Share this post Link to post Share on other sites
vastron 0 Report post Posted March 2, 2018 I ended up creating a modal and styled it like this. My game is inside the #canvasWrapper. It now looks ok with the game scaling! <style> body { background-color: black; box-sizing: border-box; } * { padding: 0; margin: 0; } #canvasWrapper { width: 99vw; height: 99vh; margin: 0 auto; } .modal.in { display: flex !important; } .modal .modal-dialog { margin: auto; } h4 { text-align: center; } .fa-undo-alt, .fa-check { display: none; } .modal-dialog { z-index: 50000; } @media screen and (orientation: portrait) { body.modal-open { position: fixed; } } </style> Share this post Link to post Share on other sites