feature: setting some of css for mobile

This commit is contained in:
SRP-mango 2023-07-15 15:44:27 +07:00
parent 5cd87926de
commit 0e54335e9d
4 changed files with 26 additions and 6 deletions

View file

@ -4,7 +4,11 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>micromobility-navigation</title>
<style>
html, body {margin: 0; height: 100%; overflow: hidden}
</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View file

@ -11,5 +11,5 @@
</template> </template>
<script setup> <script setup>
import {RouterLink, RouterView} from 'vue-router'; import {RouterLink, RouterView} from 'vue-router';
</script> </script>

View file

@ -1,3 +1,19 @@
/* for mobile user */
body{ body{
background-color: transparent; display: block;
margin: auto auto auto auto;
padding: 1rem 1rem 1rem 1rem;
max-width: 450px;
height: 925px;
background-color: white;
}
:root{
background-color: rgb(131, 131, 131);
}
/* disable desktop & tablet for now due to unfinalized design */
@media only screen and (min-width: 700px) {
body{
display: none;
}
} }