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,10 +4,14 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<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>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
</html>

View file

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

View file

@ -4,4 +4,4 @@ import '@/style.css'
import App from '@/App.vue'
import router from '@/plugins/router'
createApp(App).use(router).mount('#app')
createApp(App).use(router).mount('#app')

View file

@ -1,3 +1,19 @@
/* for mobile user */
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;
}
}