CODEWITHSUNDEEP
htmlcssvue.jsvuetify.js
Ravi Anand
Ravi Anand

Reputation: 5544

vuetify v-col xs="12" only fill half the width

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/[email protected]/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

Codepan sample

Upvotes: 27

Views: 28085

Answers (1)

Trenton Trama
Trenton Trama

Reputation: 4930

It's a combination of two things

  1. There is no XS prop available to v-col.
  2. Columns automatically take up the entire available space within its parent container unless you've specified the width it should take up before hand.

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"
>

Upvotes: 43

Related Questions