How to specify different margin for different screen sizes using breakpoint in Vuetify

Question

Question:

I have a loop displaying specified amount of cards.

The problem is with ma-5 attribute in <v-flex>. On xs screen size this margin is too big. Ho do I specify a different margin for different screen sizes?

Code:

   <v-container>       <v-layout row wrap>         <v-flex xs12 sm6 md4 ma-5 v-for="card in filteredCards" :key="card.id">           <v-card flat class="elevation-20 test">             <v-card-media :src="card.image" height="200px">             </v-card-media>             <v-card-title primary-title class="pa-4">                <div>                   <h3 class="headline mb-0">{{card.title}}</h3>                   <div style="min-height:50px;">{{card.description}}</div>                </div>             </v-card-title>           </v-card>         </v-flex>       </v-layout>    </v-container> 

Tried:

---

I tried adding this code below (copied from this page)

<v-flex xs12 sm6 md4 v-for="card in filteredCards" :key="card.id"    :class="{'ma-0': $breakpoint.smAndDown, 'ma-5': $breakpoint.mdAndUp}"> 

and I get these errors:

• [Vue warn]: Property or method "$breakpoint" is not defined on the instance but referenced during render

• [Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined"

• TypeError: Cannot read property 'smAndDown' of undefined

---

Answer 1

$vuetify.breakpoint.smAndDown

Notice $vuetify

In your case:

<v-flex      v-for="card in filteredCards"     :key="card.id"     :class="{'ma-0': $vuetify.breakpoint.smAndDown, 'ma-5': $vuetify.breakpoint.mdAndUp}"     xs12 sm6 md4   > 

Check docs (Breakpoint object)