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 . On xs

Answer 1

There is an easier way now:

<v-card 
  v-for="card in filteredCards"
  :key="card.id"
  class="ma-0 ma-md-5"
>
{{card.title}}
</v-card>

this applies margin of 0 for XS and SM, and margin 5 for MD and up

Answer 2

The helper classes apply margin or padding at a given breakpoint. These classes can be applied using the following format: {property}{direction}-{breakpoint}-{size}.

Answer 3

$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)