I am wondering why vuetify breakpoints are not working on when screen size is <600px
new Vue({
el: '#app',
vuetify: new Vuetify(),
})<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<v-app id="inspire">
<v-container class="grey lighten-5">
<v-row no-gutters>
<v-col
v-for="n in 3"
:key="n"
xs="12"
sm="12"
md="4"
>
<v-card
class="pa-2"
outlined
tile
>
One of three columns
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</div>I am expecting same column width when screen size is XS
It's a combination of two things
Columns will automatically take up an equal amount of space within their parent container. This can be modified using the cols prop. You can also utilize the sm, md, lg, and xl props to further define how the column will be sized in different viewport sizes.
https://vuetifyjs.com/en/components/grids#auto-sizing-columns
To address this, set the "cols" prop of v-col to 12 to indicate that it should take up 12 columns across all viewports. You can consider it to be the "xs" property you're trying to use. Then, any larger viewports will inherit the last valid size.
<v-col
v-for="n in 3"
:key="n"
cols="12"
md="4"
>