From 0e54335e9dc5b427b4fa3fb8c150ac91cf821ee9 Mon Sep 17 00:00:00 2001 From: SRP-mango Date: Sat, 15 Jul 2023 15:44:27 +0700 Subject: [PATCH] feature: setting some of css for mobile --- micromobility-navigation/index.html | 8 ++++++-- micromobility-navigation/src/App.vue | 2 +- micromobility-navigation/src/main.js | 2 +- micromobility-navigation/src/style.css | 20 ++++++++++++++++++-- 4 files changed, 26 insertions(+), 6 deletions(-) diff --git a/micromobility-navigation/index.html b/micromobility-navigation/index.html index 795e4fb..5d884f6 100644 --- a/micromobility-navigation/index.html +++ b/micromobility-navigation/index.html @@ -4,10 +4,14 @@ - Vite + Vue + micromobility-navigation + +
- + \ No newline at end of file diff --git a/micromobility-navigation/src/App.vue b/micromobility-navigation/src/App.vue index 27be47d..0347169 100644 --- a/micromobility-navigation/src/App.vue +++ b/micromobility-navigation/src/App.vue @@ -11,5 +11,5 @@ \ No newline at end of file diff --git a/micromobility-navigation/src/main.js b/micromobility-navigation/src/main.js index 4c1de49..ed33be1 100644 --- a/micromobility-navigation/src/main.js +++ b/micromobility-navigation/src/main.js @@ -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') \ No newline at end of file diff --git a/micromobility-navigation/src/style.css b/micromobility-navigation/src/style.css index 9dee55a..e60ec28 100644 --- a/micromobility-navigation/src/style.css +++ b/micromobility-navigation/src/style.css @@ -1,3 +1,19 @@ +/* for mobile user */ body{ - background-color: transparent; -} \ No newline at end of file + 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; + } +}