7

This one is giving me a headache.. Perhaps I'm just missing something silly, hope you guys can help.

The whole html element has a width of approximately 80% of the screen on mobile devices.

On a laptop, reducing the screen size does not replicate the problem. The html will be full size as expected.

Here's the link of the app so you can see by yourself : https://kaayo.vercel.app/

I tried debugging with android devtools and this is what it shows:

this

And finally, here's my chakraTheme.js:

global: {
      "html, body": {
        color: "gray.600",
        margin: "0",
        padding: "0",
        lineHeight: "tall",
        fontWeight: "400",
        backgroundColor: "bg.100",
      },
      body: { minHeight: "100vh" },
      "input:focus": {
        borderColor: "primary.200!important",
      },
      "a:hover": {
        textDecoration: "none",
      },
      ':focus:not(:focus-visible):not([role="dialog"]):not([role="menu"])': {
        boxShadow: "none !important",
      },
    },

If you need anything else just tell me.

Thank you for your help!

m4n0
  • 29,823
  • 27
  • 76
  • 89
sniv
  • 101
  • 1
  • 4
  • 5
    This https://nimb.ws/i2CJIU turned into this: https://nimb.ws/oqjzPD `` Try adding `initial-scale=1` that is all. Later you may want to adjust the padding of body or other elements since it is now set to 0, the elements would be touching the screen. – m4n0 May 29 '21 at 06:14
  • 1
    Works like a charm! Now I realize that's in the next documentation, I just missed it. Thank you! – sniv May 29 '21 at 06:52

0 Answers0