vue.js - Vuetify stop zoom out Website on small displays

Question

I use Vuetify in my webapplication. The whole webapplication is responsive. I have the problem that on smaller screens (Smartphone, Pad) I can zoom out of the website which means that I have a white space on the right of my website.

I don't know how this can happen and it is in every single page of my web application like that. What can I do that I use from beginning the whole space and the user can not zoom out from the website and gets this white space on the left?

Below a short example:

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row justify="center" align="center">
          <v-col cols="12" xs="10" sm="10" md="10" lg="10" xl="10">
            TEST_COL
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>


<script>

  export default {
    data: () => ({  
    }),
  }

</script>

<style>
</style>

Maybe the problem is in the App.vue file but I don't see any problem there. To be sure I post the app.vue below:

<template>
  <v-app>
    <Navbar />
    <v-main>
      <router-view></router-view>
    </v-main>
    <Footer />
  </v-app>
</template>

I put two screenshots below so you see what i mean.

Thanks! Chris

Answer 1

I got the answer. I used the <v-navigation-drawer> provided by Vuetify to create a drawer object. I used the following options:

<v-navigation-drawer v-model="drawer" absolute temporary right>

But absolute means it "Applies position: absolute to the component." which means that it takes extra space in the website. The option must be "fixed" instead of "absolute" then it works.

The good settings are:

<v-navigation-drawer v-model="drawer" fixed temporary right>

Now the drawer opens on the right side of the website (better for smartphones) and it doesn't take any absolute space!!