CODEWITHSUNDEEP
vuetify.js
Un1
Un1

Reputation: 4132

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

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. How 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>

What I've Tried:

I added 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

Upvotes: 32

Views: 34715

Answers (4)

Gass
Gass

Reputation: 9344

In Vuetify this is named Spacing

You can see the docs here

Spacing

Update your layout without creating new classes. Spacing helpers are useful for modifying the padding and margin of an element.

How it works

The helper classes apply margin or padding to an element ranging from 0 to 16. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format {property}{direction}-{size}.

Example

ma-lg-8 means that the margin will be 8 when the screen is wider than lg breakpoint. Below that, the margin will be 3 --> ma-3

<template>
  <v-container class="ma-3 ma-lg-8">
    <v-row>
      <v-col>
        {{ someRandomText }}        
      </v-col>
    </v-row>
  </v-container>
</template>

You can also try adding them as attributes <v-container ma-3 ma-lg-8>, instead of in the class, it worked for me.

Upvotes: 1

ierdna
ierdna

Reputation: 6293

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

Upvotes: 9

Traxo
Traxo

Reputation: 19002

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

Upvotes: 70

Leandro Santiesteban
Leandro Santiesteban

Reputation: 101

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

Upvotes: 10

Related Questions