Mobile scaling #29
Comments
|
Ya, it looks like scrolling & zooming are still sketchy. |
I just forked it yesturday one of the first things I did was fix mobile view cause like 80% are on mobile now, changed below code. app.tsx <Head>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width, viewport-fit=cover"
key="viewport"
maximum-scale="1"
/>
</Head>global.css @tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'Hack';
src: url(/assets/fonts/Hack-NF.ttf);
display: swap;
}
* {
font-family: 'Hack', monospace;
}
html,
body,
body > div:first-child,
div#__next,
div#__next > div {
height: 100%;
overflow: auto;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
min-width: 3px;
min-height: 3px;
}
::-webkit-scrollbar-track {
background: #1e252e;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: #ebdbb2;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #ff8037;
}
@media (max-width: 550px) {
* {
font-size: 0.945em;
}
}
@media (max-width: 450px) {
html,
body,
body > div:first-child,
div#__next,
div#__next > div {
min-width: 425px;
}
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Opening a liveterm website on a mobile device results in bad scaling, weird scrolling and zooming.
The text was updated successfully, but these errors were encountered: