How to fill the width of the content in vuetify

Question

1. What I want is that to fill the width of the entire mobile screen with vuetify

with this code :

 <v-content>
    <router-view>
      <v-container fluid></v-container>
    </router-view>
  </v-content>

the router view has a margin on both left and right side

2. and that bottom-nav is already fitted on the screen and I won't be dragging the screen to show the bottom-nav

Answer 1

I needed to dynamically remove padding only on mobile, this works for me:

<v-container :class="{'px-0': $vuetify.breakpoint.xsOnly }">
   <router-view> </router-view>
</v-container>

There is not much documentation that I could find as of now, but looking at the code I found these:

// Breakpoint ranges. 
xsOnly,
smOnly, 
smAndDown,
smAndUp,
mdOnly,
mdAndDown,
mdAndUp,
lgOnly,
lgAndDown,
lgAndUp,
xlOnly,

Answer 2

you can also try this, vuetify has helper classes to set padding and margin

<v-container fluid  class="pa-0 ma-0">
</v-container>