Vertical alignment in portrait mode

Welcome to our brand new Clickteam Community Hub! We hope you will enjoy using the new features, which we will be further expanding in the coming months.

A few features including Passport are unavailable initially whilst we monitor stability of the new platform, we hope to bring these online very soon. Small issues will crop up following the import from our old system, including some message formatting, translation accuracy and other things.

Thank you for your patience whilst we've worked on this and we look forward to more exciting community developments soon!

Clickteam.
  • Hello! I recently punished Please login to see this link. to itch.io and it's working great. However, I can't for the life of me get the canvas to align vertically in portrait fullscreen mode (such as a mobile device).

    My most successful attempt so far is this, which does align it correctly:

    body {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }

    ... but it displaces the mouse/touch so the top-left becomes x0,y0, instead of starting at the canvas, thus rendering my buttons unclickable (unless you click several pixels above the button).

    Not sure if this is a HTML5 or Fusion issue but I thought I'd ask here. Any ideas?

  • If anyone googles this in the future, this was the solution. Replace the existing canvas div in index.html with this:

    Quote

    <div style="display: flex; -webkit-user-select: none; text-align: center; align-items: center; justify-content: center; height: 100vh;">
    <canvas id="MMFCanvas" width="640" height="480">
    Your browser does not support Canvas.
    </canvas>
    </div>

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!