title: How to specify different margin for different screen sizes using breakpoint in Vuetify
body: <h3>Question:</h3>
  
  <p>I have a loop displaying specified amount of cards. </p>
  
  <p>The problem is with <code>ma-5</code> attribute in <code>&lt;v-flex&gt;</code>. On <code>xs</code> screen size this margin is too big. Ho do I specify a different margin for different screen sizes?</p>
  
  <h3>Code:</h3>
  
    
  
  <pre class="lang-html prettyprint-override"><code>   &lt;v-container&gt;
        &lt;v-layout row wrap&gt;
          &lt;v-flex xs12 sm6 md4 ma-5 v-for="card in filteredCards" :key="card.id"&gt;
            &lt;v-card flat class="elevation-20 test"&gt;
              &lt;v-card-media :src="card.image" height="200px"&gt;
              &lt;/v-card-media&gt;
              &lt;v-card-title primary-title class="pa-4"&gt;
                 &lt;div&gt;
                    &lt;h3 class="headline mb-0"&gt;{{card.title}}&lt;/h3&gt;
                    &lt;div style="min-height:50px;"&gt;{{card.description}}&lt;/div&gt;
                 &lt;/div&gt;
              &lt;/v-card-title&gt;
            &lt;/v-card&gt;
          &lt;/v-flex&gt;
        &lt;/v-layout&gt;
     &lt;/v-container&gt;
  </code></pre>
  
  <h3>Tried:</h3>
  
  <hr>
  
  <p>I tried adding this code below (copied from <a href="https://github.com/vuetifyjs/vuetify/issues/1434" rel="noreferrer">this</a> page)</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;v-flex xs12 sm6 md4 v-for="card in filteredCards" :key="card.id"
     :class="{'ma-0': $breakpoint.smAndDown, 'ma-5': $breakpoint.mdAndUp}"&gt;
  </code></pre>
  
  <p>and I get these errors:</p>
  
  <ul>
  <li><p><code>[Vue warn]: Property or method "$breakpoint" is not defined on the instance but referenced during render</code></p></li>
  <li><p><code>[Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined"</code></p></li>
  <li><p><code>TypeError: Cannot read property 'smAndDown' of undefined</code></p></li>
  </ul>
  
  <hr>